通过观察了百度的首页，对于更多产品一栏，觉得可以不涉及JS便可写出下拉导航栏的效果
1.先设计出大体的框架
2.初始化样式，修改默认的无序列表
*{
padding: 0;
margin: 0;
}
.nav{
width: 100%;
height: 50px;
display: block;
position: relative;
}
3.设置nav下的ul让其浮动，使列表处于同一水平线，同时设置li，a的样式
.nav ul{
display: block;
float: right;
position: relative;
}
.nav ul li{
display: inline-block;
padding: 5px;
text-align: center;
border-left: 2px solid #f2f2f2;
position: relative;
}
.nav ul li a{
color: #666;
}
4.重要的一步之一，通过修改li下ul的display属性，使其没hover时隐藏，同时设置下拉框li的样式，使其更加自然
.nav ul li ul{
display: none;
}
.nav ul li ul li{
height: 55px;
width: 50%;
border-left: none;
border-bottom: 2px solid #f2f2f2;
}
5.hover到隐藏的ul时，修改其display属性，使其显示，同时使用position的absolute，使其显示自然
.nav ul li a:hover{
color: #06AEDA;
}
.nav ul li:hover ul {
display: block;
position: absolute;
}
样式全部代码：
*{
padding: 0;
margin: 0;
}
.nav{
width: 100%;
height: 50px;
display: block;
position: relative;
}
.nav ul{
display: block;
float: right;
position: relative;
}
.nav ul li{
display: inline-block;
padding: 5px;
text-align: center;
border-left: 2px solid #f2f2f2;
position: relative;
}
.nav ul li a{
color: #666;
}
.nav ul li ul{
display: none;
}
.nav ul li ul li{
height: 55px;
width: 50%;
border-left: none;
border-bottom: 2px solid #f2f2f2;
}
.nav ul li a:hover{
color: #06AEDA;
}
.nav ul li:hover ul {
display: block;
position: absolute;
}
个人觉得有几点不足之处：
1.position的absolute属性对自适应有影响，但又想不出有什么方法可以使其显示正常，希望有大牛能够解决我的疑惑。
2.当然方法不止一种，也希望有多些朋友们能够提出其他思路，让我学习借鉴，谢谢！
引用前请标明出处：http://www.cnblogs.com/zkhzz/ 谢谢
CSS制作一个简单网页的下拉导航栏
网页下拉导航栏的制作 网页下拉导航栏的制作很简单,只需要运用好CSS中伪选择器. 首先说明几个简单的伪选择器(比较常用的): link:连接平常的状态 visited:连接被访问过之后 hover:鼠 ...
一、简单的移动端tab头部二级下拉导航栏，向下弹出，向上隐藏
一.简单的移动端tab头部二级下拉导航栏,向下弹出,向上隐藏
...纯CSS实现二级下拉导航菜单
这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8.火狐等都支持,而且它还是学习CSS菜单编写的典型教程,让你学会很多CSS技巧. 运行效果截图如下: < ...
Javascript下拉导航
1.右侧导航 tree.js function Toggle(e){ if(!document.getElementById) return; if(!e) var e = window.event; ...
HTML DOM部分---做竖向横向的下拉导航 下拉菜单 图片轮播(圆点、箭头) 选项卡 进度条；
1,竖向下拉导航 鼠标单击打开 再打击关闭
CSS+JS下拉菜单和纯CSS下拉菜单
下拉菜单 (思路:先把二级定位到屏幕外,鼠标悬停重新定位回来:另一个就是ul浮动,li也浮动) 下拉菜单的一般思路就是把子导航嵌套在无序列表中,把列表定位到屏幕之外,当鼠标悬停在其父列表项上时,重新定 ...
使用 CSS overscroll-behavior 控制滚动行为：自定义下拉刷新和溢出效果
CSS 的新属性 overscroll-behavior 允许开发者覆盖默认的浏览器滚动行为,一般用在滚动到顶部或者底部. 背景 滚动边界和滚动链接(boundary & chaining) ...
随机推荐
把数组A的奇数放在左边，偶数放在右边
这也是一道面试题,是不是easy到爆,但是渣渣我面试时一点算法状态都没有 这道题和上一篇博客里那道题的解法一模一样 # include using namespace ...
Nginx的session一致性问题
session一致性memcached缓存数据库解决方案 1.安装memcached内存数据库 yum –y install memcached 可以用telnet localhost 11211 S ...
Firefly官方教程之Distributed使用文档
原地址:http://bbs.gameres.com/thread_224191.html distributed使用文档1.distributed说明该模块主要封装了各个服务进程间进行通信的方法.n ...
(转)iOS7界面设计规范(9) - UI基础 - 动画
傍晚下了场大雨,现在坐在屋里也真是很风凉,听着Everlong突然觉得好像去年秋天的气息.每个季节都有各自的气息,每一年也是,如果你留意,便会感觉到.话说这几天,外面的猫猫狗狗们可以补些水来喝了,这也 ...
js取整数、取余数
js取整数.取余数 取整 1.取整 // 丢弃小数部分,保留整数部分 parseInt(5/2) // 2 2.向上取整 // 向上取整,有小数就整数部分加1 Math.ceil(5/2) // 3 ...
leetcode701
class Solution: def insertIntoBST(self, root, val): """ Time: O(log(n)) [average case ...
JAVA语言 第五周
我准备在下一周对Java语法进行总结,现在写代码模板还要参考,语法掌握的不熟悉. 这一周除了对代码进行完善外,观看了一些java入门学习视频.
【Head First Java 读书笔记】(七)继承
继承与多态 了解继承 继承的关系意味着子类继承了父类的实例变量和方法.父类比较抽象,子类比较具体. 继承层次的设计 找出具有共同属性和行为的对象(用继承来防止子类中出现重复的程序代码) 设计代表共同状 ...
融云会话界面导航上移-使用IQKeyboardManager
关于IQKeyBoardManager挤出导航栏的解决方案 方法一: 写在前面 虽然修改后能解决导航栏被挤出去的问题,但是就目前来看是有副作用的,写这篇文章就是想大家来一起讨论,毕竟键盘处理还是比较头 ...
解决ListView滑动时出现黑边的问题
[声明]转载请注明出处,此文出自指尖飞落的博客:http://blog.csdn.net/huntersnail --尊重作者,知识无价.交流无限! 两种方法 1.代码去边缘线 myList.setF ...
扫一扫
705
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
