首页新闻找找看学习计划

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的宽度?怎么解决?

少年学编程的主页 少年学编程 | 初学一级 | 园豆:3
提问于:2012-12-27 15:57
< >
分享
所有回答(5)
0

ie6应该占有量少的狠吧

jason2013 | 园豆:1998 (小虾三级) | 2012-12-28 09:32
0

div默认是占据一行,如果你 li 没有设置宽度,那么给div设置100%之后,div就会占满使用ul的宽度。

仰望繁星的猪 | 园豆:286 (菜鸟二级) | 2012-12-28 13:18
0

div,li 默认都是占据一行。

其实这种前端特效没必要自己写,网上找合适的,修改一下样式就可以用。

geass.. | 园豆:1777 (小虾三级) | 2012-12-29 15:50
0

这种情况,你只能给li限定宽度,否则你给class="narrow"的div绝对定位,宽度设置为100%后,那肯定会占满ul的,因为div,li都是块级元素,单独占一行的;建议给li宽度再给个相对定位,这样二级也才好定位

bokin | 园豆:185 (初学一级) | 2013-01-05 11:33
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%的,不知道这是不是楼主要的效果

 

 

 

 

风叶飘 | 园豆:167 (初学一级) | 2013-03-20 16:00
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册