IE6下二级菜单兼容性问题求解
0
悬赏园豆：20
[已关闭问题]
关闭于 2013-04-11 22:13
我还不能贴图片，我只能描述下情况，如果遇到此问题过的同学应该能明白。
<ul id="navList">
<li><a href="javascript:void(0)">HOME</a></li>
<li><a href="javascript:void(0)">ABOUT US</a></li>
<li><a href="javascript:void(0)">PRODUCTS</a>
<div class="narrow">
</div>
</li>
<li><a href="javascript:void(0)">QUESTION</a></li>
<li><a class="last" href="javascript:void(0)">CONTACT US</a></li>
</ul>
这里的li我是自适应宽度的，现在给class="narrow"的div绝对定位，宽度设置为100%，这个宽度为什么是整个ul的宽度？怎么解决？
所有回答(5)
0
ie6应该占有量少的狠吧
0
div默认是占据一行，如果你 li 没有设置宽度，那么给div设置100%之后，div就会占满使用ul的宽度。
0
div,li 默认都是占据一行。
其实这种前端特效没必要自己写，网上找合适的，修改一下样式就可以用。
0
这种情况，你只能给li限定宽度，否则你给class="narrow"的div绝对定位，宽度设置为100%后，那肯定会占满ul的，因为div，li都是块级元素，单独占一行的；建议给li宽度再给个相对定位，这样二级也才好定位
0
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .c{zoom:1;} .c:after{content:"."; display:block; height:0; clear:both; visibility:hidden;} #navList li{ list-style: none; float: left; padding: 20px; position: relative; } #navList li .narrow{ background: #999; position: absolute; left: 20px; top: 40px; } #navList li .narrow a{ display: block; white-space: nowrap; } </style> </head> <body> <ul id="navList"> <li><a href="javascript:void(0)">HOME</a></li> <li><a href="javascript:void(0)">ABOUT US</a></li> <li><a href="javascript:void(0)">PRODUCTS</a> <div class="narrow"> <a href="">下拉菜单下拉菜单下拉菜单</a> <a href="">下拉菜单下拉菜单下拉菜单</a> <a href="">下拉菜单下拉菜单下拉菜单</a> </div> </li> <li><a href="javascript:void(0)">QUESTION</a></li> <li><a class="last" href="javascript:void(0)">CONTACT US</a></li> </ul> </body> </html>
没有必要设置100%的，不知道这是不是楼主要的效果
