用jquery实现的一个超级简单的下拉菜单。 效果图 初始效果 鼠标悬浮效果 代码 复制代码 代码如下: <br><br>nav a { <br>text-decoration: none; <br>} <br>nav > ul > li { <br>float: left; <br>text-align: center; <br>padding: 0 0.5em; <br>} <br><br>nav li ul.sub-menu { <br>display: none; <br>padding-left: 0 !important; <br>} <br><br>.sub-menu li { <br>color: white; <br>} <br><br>.sub-menu li:hover { <br>background-color: black; <br>} <br><br>.sub-menu li:hover a { <br>color: white; <br>} <br><br>ul { <br>list-style: none; <br>} <br> Home sub1 sub2 sub3 Programming sub1 sub2 sub3 Japanese sub1 sub2 sub3 <br>$(document).ready(function() { <br>$('nav li').hover(function() { <br>$(this).find('.sub-menu').css('display', 'block'); <br>}, function() { <br>$(this).find('.sub-menu').css('display', 'none'); <br>}); <br>}); <br>
