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

最新推荐文章于 2023-12-23 23:46:51 发布

banyou4785

最新推荐文章于 2023-12-23 23:46:51 发布

阅读量153

点赞数 1

原文链接：http://www.cnblogs.com/wykCN/p/5011362.html

版权

代码如下

<!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>

显示效果：

转载于:https://www.cnblogs.com/wykCN/p/5011362.html

banyou4785

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
WEB笔记-CSS 实现多级导航效果

代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css">/*初始化全局*/*{mar...
复制链接

扫一扫