html代码：
<body class="keBody">
<!--效果html开始-->
<div id="menu2" class="menu">
<ul>
<li><a href="#">首 页</a></li>
<li><a href="#">车票预订</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">客服中心</a></li>
</ul>
<div style="float:right;margin-right:10%;background:#FFA500;font-size:12px;height:48px;" class="btn btn-primary"><span style="text-align: center;line-height:48px;color:#fff; ">登录/注册</span></div>
</div>
<!--效果html结束-->
</body>
css样式：
@charset "utf-8";
body, ul, dl, dd, dt, ol, li, p, h1, h2, h3, h4, h5, h6, textarea, form, select, fieldset, table, td, div, input {margin:0;padding:0;-webkit-text-size-adjust: none}
h1, h2, h3, h4, h5, h6{font-size:12px;font-weight:normal}
body>div{margin:0 auto}
div {text-align:left}
a img {border:0}
body { color: #333; text-align: center; font: 12px "微软雅黑"; background-color: #2B2B2B; }
ul, ol, li {list-style-type:none;vertical-align:0}
.menu{height:48px;display:block;padding:0px;100%;margin:0px auto 0 auto;}
.menu ul{list-style:none;padding:0;margin-left:110px; }
.menu ul li{float:left;overflow:hidden;position:relative;line-height:48px;text-align:center;}
.menu ul li a{position:relative;display:block;111px;height:48px;font-family:"微软雅黑", "宋体";font-size:14px;text-decoration:none;cursor:pointer;font-weight:bold;line-height:48px;}
.menu ul li a span{position:absolute;left:0;111px;}
.menu ul li a span.out{top:0px;}
.menu ul li a span.over, .menu ul li a span.bg{top:-48px;}
#menu2{background-image:url(../images/s_03.jpg);background-repeat:repeat;}
#menu2 ul li a{color:#FFFFFF;}
#menu2 ul li a span.over{color:#FFF;height:48px;111px;background-image:url(../images/w_03.jpg);background-repeat:repeat;}
jquery代码：
<script type="text/javascript">
$(document).ready(function() {
$("#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>