WEB笔记-CSS 实现多级导航效果

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
/*初始化全局*/
*{margin:0; padding:0;}
body{background:#737373;}
/*设置导航nav居中*/
nav{background:#fff;text-align:center;}
/*nav属性inliblock 保证居中*/
nav ul{display:inline-block;}
/*设置相对定位，保证子菜单位置*/
nav li{float:left;list-style:none;position:relative;border-bottom:3px #fff solid;}
/*悬停效果*/
nav li:hover{border-bottom:3px #006B8C solid;}
/*设置连接样式，行内->块级*/
nav a{display:block;padding:6px 20px;text-decoration: none;color:#676767;}
nav a:hover{background:#73C39F;color:#fff;}
nav a:active{background:#fff;color:#73C39F;}
/*子菜单清浮动*/
nav li li{float: none;}
/*隐藏子菜单 设置位置*/
nav li ul{display:none;background:#fff;position:absolute;min-width:200px;left:0;top:110%;}
/*三级以后菜单处理*/
nav li li ul{position:absolute;left:100%;top:0;}
/*悬停显示子菜单*/
nav li:hover > ul{display:block;}
    </style>
</head>
<body>
    <div id="container">
        <nav>
            <ul>
                <li><a href="#">一级菜单001</a></li>
                <li><a href="#">一级菜单002</a></li>
                <li><a href="#">一级菜单003</a></li>
                <li><a href="#">一级菜单004</a>
                <ul>
                    <li><a href="#">二级菜单004001</a></li>
                    <li><a href="#">二级菜单004002</a>
                    <ul>
                        <li><a href="#">三级菜单</a></li>
                    </ul>
                    </li>
                </ul>
                </li>
                <li><a href="#">一级菜单005</a></li>
            </ul>
        </nav>
    </div>
</body>
</html>

 

 

显示效果：

posted @ 2015-12-01 21:27  wykCN  阅读(392)  评论(0)  编辑  收藏  举报