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