一个简单实用的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>