html实现导航下拉菜单绝对定位,纯CSS导航下拉效果,神奇的定位与显示属性

导航下拉，大家首先想到的是用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*/

在添加完以