jquery和css3實現(xiàn)熊貓tv導(dǎo)航代碼分享

<p class="ph-nav" data-pdt-block="pheader-n">
 <p class="ph-nav_shadow" style="left: 0px; width: 62px;"></p>
 <ul>
 <li class="ph-nav_item ph-nav_item--current">
 <a href="/" rel="external nofollow" >
 首頁
 
 </a>
 </li>
 <li class="ph-nav_item">
 <a href="/all" rel="external nofollow" >
 全部
 </a>
 </li>
 ...
 </ul>
</p>

 <header>
 <p class="w">
 <p class="header_logo l"><img src="img/logo.png" alt=""></p>
 <p class="header_nav r">
 <p class="header_nav_shadow"></p>
 <ul>
 <li class="header_nav_li-hover"><a href="">首頁</a></li>
 <li><a href="">智能家居</a></li>
 <li><a href="">案例展示</a></li>
 <li><a href="">致創(chuàng)能源</a></li>
 <li><a href="">答疑解惑</a></li>
 <li><a href="">合作加盟</a></li> 
 </ul>
 </p>
 </p> 
 </header>

.header_nav{
 width: 592px;
 height: 50px;
 position: relative;
}
.header_nav_shadow{
 position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 width: 72px;
 background: #F29400;
 transition: all ease-in-out .3s;
 z-index: 1;
}
.header_nav ul li{
 display: block;
 float: left;
 overflow: hidden;
 height: 50px;
 line-height: 50px;
 transition: all ease-in-out .3s;
 position: relative;
 z-index: 2;
}
.header_nav_li-hover a{
 color: #fff;
}
.header_nav ul li a{
 display: block;
 padding: 0 20px;
 height: 50px;
 line-height: 50px;
 transition: all ease-in-out .3s;
}