商城简单的导航背景切换特效

特效：

 

 

 

 

 

源码：

<style type="text/css">     .menuconww {     background-color:#6DB040;     height: 43px;     margin: 0 auto;     width: 100%; } .menuww {     background-color:#6DB040;     height: 43px;     margin: 0 auto;     padding: 0px 0 0;     position: relative;     width: 1157px;     z-index: 99999; }

.menuliww {     float: left;     height: 43px;     padding: 0px 0 0px 0px; } ul, ol {     list-style: outside none none; }

.menuliww li.home, .menuliww li.home a {     width: 100px;     text-decoration:none; }

 

 

.menuliww li {     font-size: 14px;     font-weight: bold;     height: 43px;     line-height: 43px;     overflow: hidden;     padding: 0 4px;     text-align: center;     width: 100px;     float: left; } .menuliww li a {     color: #fff;     height: 30px;     width: 94px;     float: left;     text-decoration:none; } </style>

 <div class="header">     <h1 class="logo" title="实验仪器"><a href="./" title="医疗仪器">医疗器械</a></h1>            <span style="font-size:32px;font-weight:bold;color:#F39800;top:150px;">|招商</span>         </div>      <div class="menuconww">   <div class="menuww">          <ul class="menuliww"><li class="home" onmouseover="this.style.background='#FF7900'" onmouseout="this.style.background=''"><a  href="/zhaonewnew.php">招商首页</a></li><li onmouseover="this.style.background='#FF7900'" onmouseout="this.style.background=''"><a target="_blank" href="http://www.e1617.com/help6926.html">入驻标准</a></li>   <li onmouseover="this.style.background='#FF7900'" onmouseout="this.style.background=''"><a target="_blank" href="/brand/">品牌导航</a></li>   <li onmouseover="this.style.background='#FF7900'" onmouseout="this.style.background=''"><a target="_blank" href="javascript:void(0);">招商活动</a></li><li onmouseover="this.style.background='#FF7900'" onmouseout="this.style.background=''"><a target="_blank" href="javascript:void(0);">品牌服务</a></li></ul>                 </div>  </div>