下拉菜单

首先声明不推荐这样定义css样式，易于继承混淆。

1.比如有这样的下拉菜单：

代码如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下来菜单</title>
    <style>
      *{margin: 0;padding: 0;}
       #nav{background-color: #eee;width: 600px;height: 40px;margin: 0 auto;}
       ul{list-style: none;}
       ul li{position: relative;float: left;line-height: 40px;text-align: center;}
       ul li:hover ul{display: block;}
       ul li a{text-decoration: none;padding: 0 10px;color: #000;display: block;}
       ul li a:hover{color: #fff;background-color: #bbb;}
       ul li ul{display: none;position: absolute;left: 0px;top: 40px;}
       ul li ul li{float: none;background-color: #eee;margin-top:2px; }
       ul li ul li a:hover{background-color: #06f;}
    </style>
</head>
<body>
    <div id="nav">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">大厅</a>
                <ul>
                    <li><a href="#">JavaScript</a></li>
                    <li><a href="#">jQuery</a></li>
                </ul>
            </li>
            <li><a href="#">学习</a>
                <ul>
                    <li><a href="#">JavaScriptJavaScript</a></li>
                    <li><a href="#">jQuery</a></li>
                </ul>
            </li>
            <li><a href="#">案例</a></li>
            <li><a href="#">关于</a></li>
        </ul>
    </div>
</body>
</html>

 

在主流浏览器上显示都如前面图所示，但在IE7下显示是这样的：

出现BUG原因是没有设置a标签的高度：ul li a{height:40px;},接着会出现这样的情况：

这是因为没有设置二级菜单li的宽度，设置ul li ul li{width:140px;},此时显示正常，文字也是居中的。

IE7会出现这种情况的原因是，二级li下的a标签继承了一级li下a标签的display:block，设置了块显示就要设置其宽度或高度。 

 

2.若是希望二级菜单内容宽度自适应，可以采取这样的方法：

把一级菜单的ul li{position:relative;} 相对定位去掉，二级菜单宽度就可以自适应了，再把ul li ul绝对定位的top和left值去掉，就可以实现，同时这种方法也没有在IE7的兼容问题。不过这种方法不推荐使用，position属性的relative与absolute最好一起使用。

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下来菜单</title>
    <style>
      *{margin: 0;padding: 0;}
       #nav{background-color: #eee;width: 600px;height: 40px;margin: 0 auto;}
       ul{list-style: none;}
       ul li{float: left;line-height: 40px;text-align: center;}
       ul li:hover ul{display: block;}
       ul li a{text-decoration: none;padding: 0 10px;color: #000;display: block;}
       ul li a:hover{color: #fff;background-color: #bbb;}
       ul li ul{display: none;position: absolute;}
       ul li ul li{float: none;background-color: #eee;margin-top:2px;}
       ul li ul li a:hover{background-color: #06f;}
    </style>
</head>
<body>
    <div id="nav">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">大厅</a>
                <ul>
                    <li><a href="#">JavaScript</a></li>
                    <li><a href="#">jQuery</a></li>
                </ul>
            </li>
            <li><a href="#">学习</a>
                <ul>
                    <li><a href="#">JavaScriptJavaScript</a></li>
                    <li><a href="#">jQuery</a></li>
                </ul>
            </li>
            <li><a href="#">案例</a></li>
            <li><a href="#">关于</a></li>
        </ul>
    </div>
</body>
</html>

 

参考：http://www.imooc.com/video/94

posted @ 2016-11-07 21:01  Mdreame  阅读(211)  评论(0)  编辑  收藏  举报