如何实现
Step 1 HTML
代码如下:
Home
Tutorials
Ch1
Ch2
Ch21
Ch211
Ch2111
Ch21111
Ch21112
Ch21113
Ch21114
Ch21115
Ch21116
Ch2112
Ch2113
Ch2114
Ch2115
Ch212
Ch213
Ch214
Ch22
Ch221
Ch222
Ch223
Ch23
Ch3
Ch31
Ch32
Resources
Sub Nav Link
Sub Nav Link
About Us
Advertise
Submit
Contact Us
Step 2 CSS
代码如下:
Step 3 jQuery
代码如下:
$(document).ready(function() {
// Top Menu
$("ul.submenu1").parent().append(""); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.submenu1*)
$("ul.topmenu li span").click(function() { //When trigger is clicked...
//Following events are applied to the submenu1 itself (moving submenu1 up and down)
$(this).parent().find("ul.submenu1").slideDown('fast').show(); //Drop down the submenu1 on click
$(this).parent().hover(function() {
}, function() {
$(this).parent().find("ul.submenu1").slideUp('slow'); //When the mouse hovers out of the submenu1, move it back up
});
//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
$(this).addClass("hover"); //On hover over, add class "hover"
}, function() { //On Hover Out
$(this).removeClass("hover"); //On hover out, remove class "hover"
}); $("ul.topmenu li ul.submenu1 li").hover(function() {
$(this).find("ul.submenu11:first").show("slow");
}, function() {
$(this).find("ul.submenu11:first").hide("fast");
});
});
演示代码
http://www.gxlcms.com/jiaoben/23955.html