css3之天猫侧边栏 （飞动效果）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script>
<style>
*{margin: 0;padding: 0;font-size: 14px;}
body{ width: 100%; height: 1000px; background:skyblue;}
.nav{ width:35px; height: 400px;background:#000;margin: 0 auto; margin-top: 100px;}
.nav ul{ width:35px; height: 400px;}
.nav ul li{cursor: pointer; list-style:none;margin-bottom: 1px; float: left;position: relative;}
.nav ul li a{display: block;text-decoration: none;width:35px;height: 35px;
background-image: url(img/pic.png);background-repeat: no-repeat;}
.nav ul li:hover a{background:#FF0036;background-image: url(img/pic.png);}
.nav ul.subnav{position: absolute;height:35px;width: 100px; padding: 0;margin: 0;
background:#494949;opacity: 0;visibility: hidden;transition: all 250ms ease-in-out 100ms;
-o-transition: all 250ms ease-in-out 100ms;-ms-transition: all 250ms ease-in-out 100ms;
-moz-transition: all 250ms ease-in-out 100ms;-webkit-transition: all 250ms ease-in-out 100ms;
z-index: 1000; left:80px; top: 0px;}
.nav ul.subnav p{padding: 8px 20px;color: white;}
.nav ul li:hover .subnav{
display: block;
opacity: 1;
visibility: visible;
left:40px;
}
.ewm_arrow{ position: absolute;
top: 10px;
left: -14px;
border-style: solid;
border-width: 7px;
border-color: transparent #494949 transparent transparent !important;
z-index: 2;}
</style>
</head>
<body>
<div class="nav">
<ul>
<li>
<a></a>
<ul class="subnav">
<div class="ewm_arrow"></div>
<p>我的资产</p>
</ul>
</li>
<li>
<a></a>
<ul class="subnav">
<div class="ewm_arrow"></div>
<p>我的资产</p>
</ul>
</li>
<li>
<a></a>
<ul class="subnav">
<div class="ewm_arrow"></div>
<p>我的资产</p>
</ul>
</li>
<li>
<a></a>
<ul class="subnav">
<div class="ewm_arrow"></div>
<p>我的资产</p>
</ul>
</li>
<li>
<a></a>
<ul class="subnav">
<div class="ewm_arrow"></div>
<p>我的资产</p>
</ul>
</li>
</ul>
</div>
</body>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script>
<style>
*{margin: 0;padding: 0;font-size: 14px;}
body{ width: 100%; height: 1000px; background:skyblue;}
.nav{ width:35px; height: 400px;background:#000;margin: 0 auto; margin-top: 100px;}
.nav ul{ width:35px; height: 400px;}
.nav ul li{cursor: pointer; list-style:none;margin-bottom: 1px; float: left;position: relative;}
.nav ul li a{display: block;text-decoration: none;width:35px;height: 35px;
background-image: url(img/pic.png);background-repeat: no-repeat;}
.nav ul li:hover a{background:#FF0036;background-image: url(img/pic.png);}
.nav ul.subnav{position: absolute;height:35px;width: 100px; padding: 0;margin: 0;
background:#494949;opacity: 0;visibility: hidden;transition: all 250ms ease-in-out 100ms;
-o-transition: all 250ms ease-in-out 100ms;-ms-transition: all 250ms ease-in-out 100ms;
-moz-transition: all 250ms ease-in-out 100ms;-webkit-transition: all 250ms ease-in-out 100ms;
z-index: 1000; left:80px; top: 0px;}
.nav ul.subnav p{padding: 8px 20px;color: white;}
.nav ul li:hover .subnav{
display: block;
opacity: 1;
visibility: visible;
left:40px;
}
.ewm_arrow{ position: absolute;
top: 10px;
left: -14px;
border-style: solid;
border-width: 7px;
border-color: transparent #494949 transparent transparent !important;
z-index: 2;}
</style>
</head>
<body>
<div class="nav">
<ul>
<li>
<a></a>
<ul class="subnav">
<div class="ewm_arrow"></div>
<p>我的资产</p>
</ul>
</li>
<li>
<a></a>
<ul class="subnav">
<div class="ewm_arrow"></div>
<p>我的资产</p>
</ul>
</li>
<li>
<a></a>
<ul class="subnav">
<div class="ewm_arrow"></div>
<p>我的资产</p>
</ul>
</li>
<li>
<a></a>
<ul class="subnav">
<div class="ewm_arrow"></div>
<p>我的资产</p>
</ul>
</li>
<li>
<a></a>
<ul class="subnav">
<div class="ewm_arrow"></div>
<p>我的资产</p>
</ul>
</li>
</ul>
</div>
</body>
</html>