html实现导航下拉菜单绝对定位，纯CSS导航下拉效果，神奇的
定位与显⽰属性
导航下拉，⼤家⾸先想到的是⽤JS来做。或许是⼤家看到的下拉菜单演⽰，多是JS控制的下拉，导致从先⼊为主的意识上，误以为⼆级下拉是很难的东西，必须要会Javascript才能做。css固定定位
其实，⼀个简答的下拉效果，根本不需要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都可以⽤做显⽰。(这⾥我不阐述display的那些基本内容，如果不清楚，点击此处)
在⽂档正常加载时，条件未触发前，⼆级导航是隐藏的。所以，要为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:hover 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；隐藏溢出的，那么定位的内容显⽰，是不会超出这个层的。
【原创经验⽂章，转载务必注明出处！】

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。