研究一下午滑动边栏效果

<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%;}