纯CSS实现⼆级导航下拉菜单--css的简单应⽤
思想：使⽤css的display属性控制⼆级下拉菜单的显⽰与否。当⿏标移动到⼀级导航菜单的li 标签时，显⽰⼆级导航菜单的ul标签。由于实现起来⽐较简单，所以在这⾥直接给出了参考代码。
导航菜单1、纯CSS⼆级导航下拉菜单代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" content="text/html" http-equiv="content-type">
<title>纯css⼆级导航下拉菜单</title>
<meta name="keyword" content="关键字">
<meta name="description" content="描述">
<style type="text/css">
*{margin: 0;padding: 0;}
#bg{background: red;width: 100%;height: 35px;}
nav{height: 35px;width: 1000px;margin: 0 auto;}
nav ul li{list-style-type:none;float: left}
nav ul li a{ text-decoration: none;display: block;width: 130px;line-height: 35px;text-align: center;
color:white;font-fimily：微软雅⿊;}
nav ul li ul li{float: none}
nav ul li ul li a{color:black}
nav ul li ul{display: none;}
nav ul li:hover ul{display: block;}
</style>
</head>
<body>
<div id="bg">
<nav>
<ul>
<li><a href="#">⼀级导航</a>
<ul>
<li><a href="#">⼆级导航</a></li>
<li><a href="#">⼆级导航</a></li>
<li><a href="#">⼆级导航</a></li>
<li><a href="#">⼆级导航</a></li>
</ul>
</li>
<li><a href="#">⼀级导航</a>
<ul>
<li><a href="#">⼆级导航</a></li>
<li><a href="#">⼆级导航</a></li>
<li><a href="#">⼆级导航</a></li>
</ul>
</li>
<li><a href="#">⼀级导航</a>
<ul>
<li><a href="#">⼆级导航</a></li>
<li><a href="#">⼆级导航</a></li>
<li><a href="#">⼆级导航</a></li>
<li><a href="#">⼆级导航</a></li>
</ul>
</li>
</li>
<li><a href="#">⼀级导航</a>
<ul>
<li><a href="#">⼆级导航</a></li> <li><a href="#">⼆级导航</a></li> <li><a href="#">⼆级导航</a></li> </ul>
</li>
<li><a href="#">⼀级导航</a>
<ul>
<li><a href="#">⼆级导航</a></li> <li><a href="#">⼆级导航</a></li> <li><a href="#">⼆级导航</a></li> <li><a href="#">⼆级导航</a></li> <li><a href="#">⼆级导航</a></li> </ul>
</li>
<li><a href="#">⼀级导航</a>
<ul>
<li><a href="#">⼆级导航</a></li> <li><a href="#">⼆级导航</a></li> <li><a href="#">⼆级导航</a></li> <li><a href="#">⼆级导航</a></li> </ul>
</li>
<li><a href="#">⼀级导航</a>
<ul>
<li><a href="#">⼆级导航</a></li> <li><a href="#">⼆级导航</a></li> </ul>
</li>
</ul>
</nav>
</div>
</body>
</html>
2、运⾏效果:
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论