<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.12.4.min.js" ></script> <style> *{ margin: 0; padding: 0; } li{ list-style: none; } a{ text-decoration: none; font-size: 14px; } .nav{ margin: 100px; } .nav>li{ position: relative; float: left; width: 80px; height: 40px; text-align: center; } .nav li a{ display: block; width: 100%; height: 100px; line-height: 100px; color: #333; } .nav li a:hover{ background: #eee; } .nav ul{ display: none; position: absolute; top: 40px; left: 0; width: 100%; border-left: 1px solid #fecc5b; border-right:1px solid #fecc5b; } .nav ul li{ border-bottom: 1px solid #fff5da; } .nav ul li a:hover{ background:#fecc5b; } </style> </head> <body> <ul class="nav"> <li>菜单1 <ul><a href="">菜单1</a> <li><a href="">微博</a></li> <li><a href="">微博</a></li> <li><a href="">微博</a></li> </ul> </li> <li>菜单1 <ul><a href="">菜单1</a> <li><a href="">微博</a></li> <li><a href="">微博</a></li> <li><a href="">微博</a></li> </ul> </li> <li>菜单1 <ul><a href="">菜单1</a> <li><a href="">微博</a></li> <li><a href="">微博</a></li> <li><a href="">微博</a></li> </ul> </li> </ul> <script> $(".nav>li").mousemove(function(){ $(this).children("ul").show()//鼠标悬停显示隐藏的ul元素 }) $(".nav>li").mouseout(function(){ $(this).children("ul").hide()//鼠标离开以后滑出菜单重新隐藏 }) </script> </body> </html>