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