js 精美菜单

<div id="menu2" class="menu clearfix" style="position: relative;z-index: 1111111;">
<ul>
<li><a href="#">首 页</a></li>
<li><a href="#">政务公开</a></li>
<li><a href="#">专题专栏</a></li>
<li><a href="#">在线服务</a></li>
<li><a href="#">互动交流</a></li>
<li><a href="#">业务频道</a></li>
</ul>
<div class="cls"></div>
</div>
<script type="text/javascript">
$("#menu2 li a").wrapInner( '<span class="out"></span>' );

$("#menu2 li a").each(function() {
$( '<span class="over">' + $(this).text() + '</span>' ).appendTo( this );
});

$("#menu2 li a").hover(function() {
$(".out",this).stop().animate({'top':'48px'},300); // move down - hide
$(".over",this).stop().animate({'top':'0px'}, 300); // move down - show

}, function() {
$(".out",this).stop().animate({'top':'0px'},300); // move up - show
$(".over",this).stop().animate({'top':'-48px'},300); // move up - hide
});
</script>

 

<style>

.menu{
height:48px;
display:block;
padding:0px;
width:1080px;
margin:0 auto;
position: relative;
}
.menu ul{
list-style:none;
padding:0;
margin:0;
}
.menu ul li{
float:left;
overflow:hidden;
position:relative;
line-height:48px;
text-align:center;
}
.menu ul li a{
position:relative;
display:block;
width:180px;
height:48px;
font-size:18px;
text-decoration:none;
cursor:pointer;
font-weight:bold;
line-height:48px;
}
.menu ul li a span{
position:absolute;
left:0;width:180px;
}
.menu ul li a span.out{
top:0px;
}
.menu ul li a span.over, .menu ul li a span.bg{
top:-48px;
}
#menu2{
background: #0079d5;
}
#menu2 ul li a{
color:#FFFFFF;
}
#menu2 ul li a span.over{
color:#FFF;
height:48px;
width:180px;
background-image:url(w_03.png);
background-repeat:repeat;
}

</style>