Meteor's Blog

导航下拉，大家首先想到的是用JS来做。或许是大家看到的下拉菜单演示，多是JS控制的下拉，导致从先入为主的意识上，误以为二级下拉是很难的东西，必须要会Javascript才能做。
其实，一个简答的下拉效果，根本不需要JS也能做。比如，我目前在用的Yuan，以及之前用的趣儿等，所用的下拉，都是利用CSS来做，而且还是CSS2，兼容性也不错（除了IE6）。

在分享CSS效果之前，我觉得，应该对当前的需求，做一个分析，这样能够更加理解为什么要运用的这些CSS属性。
逻辑：有一个一级导航是可见的；而要下拉的二级导航在未触发设定的条件之前，是不可见的。其中二级导航的逻辑一般都是：li一级导航>ul>li二级导航
条件：当我们的鼠标移到一级导航上时，二级导航显示（变为可见的）。
在常见的导航中，大多都是使用的ul>li的结构做的导航条。在忽略条件的情况下，如果要正常显示二级导航，那么就应让二级导航下拉出现在对应的位置。无疑，此处应该采用的是CSS的定位，即position属性。
再来分析一下，position有哪些属性值：relative（相对定位）、absolute（绝对定位）、static（正常的）、fixed（基于浏览器窗口固定的）。
要在对应一级导航下面出现二级导航，我们就需要使用absolute绝对定位来帮助我们定位，根据绝对定位是依据前一个relative（如果没有，就是根据当前html文档）来做的绝对定位。所以，在代码中要为一级导航的li选择器声明内，添加一个position:relative;。

li {position:relative;width:100px;height:40px;}/此处假设宽为100px,高为40px/

在添加完以后，继续为一级导航的li加一个后代选择器，li ul，然后加入声明，position:absolute;

li ul {position:absolute;top:40px;left:0;width:100px;}/此处假设宽为100px/

当然，这里是需要加入上下左右的值做定位的，这个根据父级li的宽度和高度，自行设定。
好了，现在已经把位置搞定了，继续分析下一个需求，显示和隐藏二级导航。
在CSS当中，显示和隐藏的属性就是display了。display的none为隐藏，block或inline-block都可以用做显示。
在文档正常加载时，条件未触发前，二级导航是隐藏的。所以，要为li ul选择器加入一个display:none;

li ul {position:absolute;top:40px;left:0;width:100px;display:none;}

最后，再分析一下如何用CSS触发条件。写过a标签的style，或许大家都清楚，有一个伪类:hover是鼠标指针放到a标签上后，可以改变a标签的style样式的。此处用伪类:hover最合适不过了，而且伪类:hover并非是a标签的专有伪类。
将给一级导航的li单独写一个选择器，用处触发条件。条件触发以后，显示二级导航ul中的内容。

li:hove ul {display:block;}/用display:block将ul变为正常显示/

好了，一个简单的下拉效果就做出来了，剩下的就是配合网站的模板再添加一些颜色等属性的搭配了。
总结：
使用纯CSS做下拉效果的要点：定位(position)、显示/隐藏(display)、伪类(:hover)，这三个是必要的内容，缺一不可。
这种方法的优点：加载快、兼容好；缺点：无法对下拉显示做CSS3动画（至少目前的我，没办法做到……）
CSS代码：

li {position:relative;width:100px;height:40px;}/此处假设宽为100px,高为40px/
li ul {position:absolute;top:40px;left:0;width:100px;display:none;}/此处假设宽为100px/
li:hove ul {display:block;}/用display:block将ul变为正常显示/

有一点要提醒的是，在CSS代码的整体控制中，如果绝对定位的任意父级使用了overflow:hidden;隐藏溢出的，那么定位的内容显示，是不会超出这个层的。

转载自：橙色阳光