<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<html xmlns=
"http://www.w3.org/1999/xhtml"
>
<head>
<meta http-equiv=
"Content-Type"
content=
"text/html;charset=gb2312"
/>
<title>导航菜单二级菜单滑动渐隐显示</title>
<script type=
"text/javascript"
src=
"js/jquery.js"
></script>
<style type=
"text/css"
>
{
margin: 0;
padding: 0;
list-style-type: none;
}
a, img
{
border: 0;
}
a, a:visited
{
color: #5e5e5e;
text-decoration: none;
}
a:hover
{
color: #333;
text-decoration: underline;
}
body
{
font: 12px/180% Arial,Lucida,Verdana,
"宋体"
,Helvetica,sans-serif;
color: #333;
background: #fff;
}
.navbox, .nav li, .nav li.current a, .nav li.selected a span, .nav li a.selected, .nav li a.selected span
{
background: url(images/headerbg.png) no-repeat;
}
.navbox
{
height:39px;
background-position:0 -138px;
background-repeat:repeat-x;
position: relative;
z-index:9;
}
.nav
{
width: 960px;
margin: 0 auto;
}
.nav li
{
float: left;
height: 39px;
background-position: 100% -99px;
padding: 0 3px 0 2px;
position: relative;
}
.nav li.last
{
background: none;
}
.nav li a
{
float: left;
display: block;
padding: 0 0 0 4px;
height: 39px;
overflow: hidden;
}
.nav li a span
{
float: left;
display: block;
padding: 0 4px 0 0;
line-height: 39px;
font-size: 14px;
color: #fff;
font-weight: 800;
cursor: pointer;
width: 142px;
text-align: center;
}
.nav li.selected a, .nav li a.selected
{
background-position: 0 -60px;
text-decoration: none;
}
.nav li.selected a span, .nav li a.selected span
{
background-position: 100% -60px;
color: #ff7e00;
}
.nav li.selected .submenu
{
display: block;
}
.nav li .submenu
{
display: none;
position: absolute;
top: 39px;
left: 6px;
}
.nav li .submenu
{
border-style: solid;
border-width: 0px 1px 1px 1px;
border-color: #ddd;
padding: 0 5px 5px 5px;
width: 132px;
background: #fff;
}
.nav li .submenu
{
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
-moz-box-shadow: 0 5px 5px #D3D3D3;
-webkit-box-shadow: 0 5px 5px #D3D3D3;
box-shadow: 0 5px 5px #D3D3D3;
}
.nav li .submenu li
{
float: none;
padding: 0;
background: none;
height:auto;
border-bottom:dotted 1px #BEBEBE;
}
.nav li .submenu li.last
{
border: none;
}
.nav li .submenu li a
{
float:none;
padding:0;
text-align:center;
height:28px;
line-height:28px;
background:none;
}
.nav li .submenu li a:hover
{
background:#ddd;
font-weight:800;
}
</style>
</head>
<body>
<script type=
"text/javascript"
>
function
dropMenu(obj) {
$(obj).each(
function
() {
var
theSpan = $(this);
var
theMenu = theSpan.find(
".submenu"
);
var
tarHeight = theMenu.height();
theMenu.css({ height: 0, opacity: 0 });
theSpan.hover(
function
() {
$(this).addClass(
"selected"
);
theMenu.stop().show().animate({ height: tarHeight, opacity: 1 }, 400);
},
function
() {
$(this).removeClass(
"selected"
);
theMenu.stop().animate({ height: 0, opacity: 0 }, 400,
function
() {
$(this).css({ display:
"none"
});
});
}
);
});
}
$(document).ready(
function
() {
dropMenu(
".drop-menu-effect"
);
});
</script>
<div
class
=
"navbox"
>
<div
class
=
"nav"
>
<ul
class
=
"clearfix"
>
<li><a
class
=
"selected"
target=
"_blank"
href=
"javascript:void(0);"
><span>网站首页</span></a></li>
<li
class
=
"drop-menu-effect"
><a target=
"_blank"
href=
"javascript:void(0);"
><span>内容管理</span></a>
<ul
class
=
"submenu"
>
<li><a href=
"#"
>普通文章</a></li>
<li><a href=
"#"
>专题文章</a></li>
<li><a href=
"#"
>材料文章</a></li>
</ul>
</li>
<li
class
=
"drop-menu-effect"
><a target=
"_blank"
href=
"javascript:void(0);"
><span>系统帮助</span></a>
<ul
class
=
"submenu"
>
<li><a href=
"#"
>参考文档</a></li>
<li><a href=
"#"
>意见反馈</a></li>
<li><a href=
"#"
>官方交流论坛</a></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>