一个简单实用的css三级菜单效果
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css实现三级菜单</title>
<style type="text/css">
*{margin:0;padding:0}
ul{list-style:none}
a{text-decoration:none}
body{font-size:16px}
.nav{width:100%;height:40px;line-height:40px;background:#333}
.container{width:1000px;margin:0px auto}
.nav li{float:left;position:relative}
.nav li a{float:left;width:100px;text-align:center;height:40px;color:#fff}
.nav li ul{width:100%;background:#fff;position:absolute;left:0px;top:40px;display:none}
.nav li li{float:none}
.nav li li a{float:none;display:inline-block}
.nav li li a{color:#333}
.nav li ul li ul{left:100px;top:0px}
.nav li:hover{background:red}
.nav li:hover>ul{display:block}
.banner img{width:100%}
</style>
</head>
<body>
<div id="nav" class="nav">
<div class="container">
<ul>
<li><a href="#">home</a></li>
<li>
<a href="#">javascript</a>
<ul>
<li><a href="#">css</a></li>
<li>
<a href="#">html5</a>
<ul>
<li><a href="#">angular.js</a></li>
<li><a href="#">node.js</a></li>
<li><a href="#">vue.js</a></li>
<li><a href="#">React</a></li>
</ul>
</li>
<li><a href="#">jQuery</a></li>
<li><a href="#">backbone</a></li>
</ul>
</li>
<li>
<a href="#">editor</a>
<ul>
<li><a href="#">Sublime Text</a></li>
<li><a href="#">Atom</a></li>
<li><a href="#">Dreamweaver</a></li>
<li><a href="#">HBuilder</a></li>
</ul>
</li>
<li><a href="#">about us</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>
</div>
<div class="img">
<img src="image/1.jpg" alt="">
</div>
</body>
</html>
时间： 2024-10-24 11:15:47