织梦二次开发,二次开发,李丕长,网站php二次开发,做网站,模板设计,jquery效果,jquery特效

制作如上所示的下拉菜单功能,样式代码和jquery代码如下希望对你有用

jquery代码如下:
$(document).ready(function() {
	$('#navigation').children("li").each(function(){
		
			$(this).hover(
			  function () {
			    $(this).find("div").show();
			   
			  },
			  function () {
			   $(this).find("div").hide();
			  }
			);
	});
});
样式代码如下:
.navigation {
position: relative;
width: 970px;
height: 69px;
background: url(/images/test/nav-bg.jpg) no-repeat 0 0;
margin: 8px auto 0;
}
.navigation ul {
list-style-type: none;
padding-left: 15px;
}
.navigation ul li {
position: relative;
float: left;
display: inline;
height: 60px;
padding-top: 9px;
}
.navigation ul li a {
float: left;
display: inline;
height: 60px;
font-size: 14px;
font-weight: bold;
color: #fff;
text-transform: uppercase;
line-height: 59px;
padding: 0 25px;
text-shadow: -1px 1px 1px #620a0d;
}
.navigation ul li .dd {
position: absolute;
top: 69px;
left: 0;
width: 170px;
display: none;
background-color: #fff;
border: 1px solid #c5c6c0;
border-bottom: 0;
z-index: 100;
}
.navigation ul li a.first:hover {
background: url(/images/test/first-nav-hover.gif) no-repeat 0 0;
}
.navigation ul li a:hover{
background: url(/images/test/nav-hover.gif) repeat-x 0 0;
text-decoration: none;
text-shadow: -1px 1px 1px #262626;
}

.navigation ul li .nav-arrow {
position: absolute;
top: 37px;
right: 11px;
display: block;
width: 9px;
height: 6px;
background: url(/images/test/nav-arrow.gif) no-repeat 0 0;
}
.menu {
height: 155px;
background: url(/images/test/header-bg.jpg) repeat-x 0 -88px;
position: relative;
z-index: 100;
}

.navigation ul li .dd {
position: absolute;
top: 69px;
left: 0;
width: 170px;
display: none;
background-color: #fff;
border: 1px solid #c5c6c0;
border-bottom: 0;
z-index: 100;
}
.navigation ul li .dd ul li {
float: none;
display: block;
width: 170px;
height: 33px;
padding: 0;
border-bottom: 1px solid #c5c6c0;
font-size: 0;
line-height: 0;
}

.navigation ul li .dd ul li a:hover, .navigation ul li .dd ul li a.hover {
background: #eaeaea !important;
}
.navigation ul li .dd ul {
padding: 0;
}
.navigation ul li .dd ul li {
float: none;
display: block;
width: 170px;
height: 33px;
padding: 0;
border-bottom: 1px solid #c5c6c0;
font-size: 0;
line-height: 0;
}
.navigation ul li .dd ul li a {
float: none;
display: block;
height: 33px;
text-shadow: none;
text-transform: none;
color: #454543;
font-size: 13px;
line-height: 32px;
padding: 0 0 0 13px;
font-family: "Trebuchet MS", Arial, sans-serif;
font-weight: normal;
}