<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>04_导航动态显示效果</title> <script src="jquery-1.10.1.js"></script> <style rel="stylesheet"> * { margin: 0; padding: 0; word-wrap: break-word; word-break: break-all; } body { background: #FFF; color: #333; font: 12px/1.6em Helvetica, Arial, sans-serif; } a { color: #0287CA; text-decoration: none; } a:hover { text-decoration: underline; } ul, li { list-style: none; } img { border: none; } h1, h2, h3, h4, h5, h6 { font-size: 1em; } html { overflow: -moz-scrollbars-vertical; /* 在Firefox下始终显示滚动条*/ } #navigation { width: 784px; padding: 8px; margin: 8px auto; background: #3B5998; height: 18px; } #navigation ul li { float: left; margin-right: 14px; position: relative; z-index: 100; } #navigation ul li a { display: block; padding: 0 8px; background: #EEEEEE; font-weight: 700; } #navigation ul li a:hover { background: none; color: #fff; } #navigation ul li ul { background-color: #88C366; position: absolute; width: 80px; overflow: hidden; display: none; } #navigation ul li ul li { border-bottom: 1px solid #BBB; text-align: left; width: 100%; } </style> </head> <body> <div id="navigation"> <ul> <li><a href="#">首 页</a></li> <li> <a href="#">衬 衫</a> <ul> <li><a href="#">短袖衬衫</a></li> <li><a href="#">长袖衬衫</a></li> <li><a href="#">无袖衬衫</a></li> </ul> </li> <li> <a href="#">卫 衣</a> <ul> <li><a href="#">开襟卫衣</a></li> <li><a href="#">套头卫衣</a></li> </ul> </li> <li> <a href="#">裤 子</a> <ul> <li><a href="#">休闲裤</a></li> <li><a href="#">卡其裤</a></li> <li><a href="#">牛仔裤</a></li> <li><a href="#">短裤</a></li> </ul> </li> <li><a href="#">联系我们</a></li> </ul> </div> <script> // $("#navigation>ul>li:has(ul)").hover(function () { //加.stop()是为了防止短时间内多次触发移入移出事件导致的多次展开收缩。 $(this).children("ul").stop().slideDown(400) }, function () { $(this).children("ul").stop().slideUp("fast") }) </script> </body> </html>
界面：
