<div class="main">
<div class="left">
<div class="left_top">
H辉
</div>
<div class="left_mid">
<ul>
<li><p>HOME</p><a href="">首页</a></li>
<li><p>About Us</p><a href="">公司概况</a></li>
<li><p>NEWS</p><a href="">最新动态</a></li>
<li><p>WORKS</p><a href="">优秀作品</a></li>
<li><p>CONTENTS</p><a href="">业务洽谈</a></li>
<img src="images/code2.png" />
<script type="text/javascript">
$(document).ready(function(){
$(".main .left_mid ul li").mouseenter(function(){
$(this).children("p").css("top","-50px");
$(this).children("a").css("top","-50px");
});
$(".main .left_mid ul li").mouseleave(function(){
$(this).children("p").css("top","0px");
$(this).children("a").css("top","0px");
});
});
</script>
</ul>
</div>
</div>
</div>
html文件
*{ background:#2868c8; border:0px; margin:0px auto; padding:0px; list-style:none}
* a{ text-decoration:none}
.main{ width:1180px; height:auto}
.main *{ float:left}
.left{ width:15%; height:700px; background:#999;}
.left_top{ width:100%; height:120px; background:#F00;}
.left_mid{ width:100%; height:400px; background:#33F}
.left_mid ul{ width:100%;}
.left_mid li{ width:100%; height:50px; background:inherit; border-right:solid 2px #999; line-height:50px; position:relative; overflow:hidden;}
.left_mid li p{ width:80%; padding-left:20%; color:#FFF; font-family:Arial, Helvetica, sans-serif; background:#006; position:relative;transition: top 0.5s, transform 0.5s;-moz-transition: top 0.5s, -moz-transform 0.5s;-webkit-transition:top 0.5s, -webkit-transform 0.5s;-o-transition: top 0.5s,-o-transform 0.5s;}
.left_mid li a{ width:80%; padding-left:20%; color:#333; font-family:"微软雅黑"; position:relative;transition: top 0.5s, transform 0.5s;-moz-transition: top 0.5s, -moz-transform 0.5s;-webkit-transition:top 0.5s, -webkit-transform 0.5s;-o-transition: top 0.5s,-o-transform 0.5s;}
.left_mid li a:hover{ background:#999}
.left_mid img { width:100%; height:100%;}