简单下拉菜单html,用jquery实现的一个超级简单的下拉菜单

用jquery实现的一个超级简单的下拉菜单。

效果图

初始效果

 

鼠标悬浮效果

 

代码

nav a {

text-decoration: none;

}

nav > ul > li {

float: left;

text-align: center;

padding: 0 0.5em;

}

nav li ul.sub-menu {

display: none;

padding-left: 0 !important;

}

.sub-menu li {

color: white;

}

.sub-menu li:hover {

background-color: black;

}

.sub-menu li:hover a {

color: white;

}

ul {

list-style: none;

}

• Home

Programming Japanese

$(document).ready(function() {

$('nav li').hover(function() {

$(this).find('.sub-menu').css('display', 'block');

}, function() {

$(this).find('.sub-menu').css('display', 'none');

});

});