网页效果：
HTML部分：
<body> <ul class="nav"> <li> <a href="javascript:void(0);">菜单项目一</a> <ul> <li>子菜单项01</li> <li>子菜单项02</li> <li>子菜单项03</li> <li>子菜单项04</li> </ul> </li> <li> <a href="javascript:void(0);">菜单项目二</a> <ul> <li>子菜单项01</li> <li>子菜单项02</li> <li>子菜单项03</li> <li>子菜单项04</li> </ul> </li> <li> <a href="javascript:void(0);">菜单项目三</a> <ul> <li>子菜单项01</li> <li>子菜单项02</li> <li>子菜单项03</li> <li>子菜单项04</li> </ul> </li> <li> <a href="javascript:void(0);">菜单项目四</a> <ul> <li>子菜单项01</li> <li>子菜单项02</li> <li>子菜单项03</li> <li>子菜单项04</li> </ul> </li> <li> <a href="javascript:void(0);">菜单项目五</a> <ul> <li>子菜单项01</li> <li>子菜单项02</li> <li>子菜单项03</li> <li>子菜单项04</li> </ul> </li> </ul> </body>
CSS部分：
ul, li { margin: 0px; padding: 0px; list-style: none; } a { text-decoration: none; } .nav { width: 450px; height: 40px; list-style: none; margin: 50px auto; line-height: 40px; background-color: #333; color: #fff; } .nav>li { width: 82px; margin: 0px 5px; float: left; text-align: center; } .nav>li>a { width: 82px; height: 40px; line-height: 40px; text-align: center; display: block; color: #FFFFFF; transition: all .5s; } .nav>li>a:hover { background-color: #0c8ed9; } .nav>li:first-child { margin-left: 0px; } .nav>li:last-child { margin-right: 0px; } .nav>li>ul { line-height: 30px; display: none; } .nav>li>ul>li { background: #333; color: #EEE; } .nav>li>ul>li:hover { background: #666; color: #FFF; cursor: pointer; }
JS部分：
$(document).ready(function() { var $nav = $(".nav>li"); $nav.mouseover(function() { $(this).children("ul").show(); }); $nav.mouseout(function() { $(this).children("ul").hide(); }); });
