首页>>导航菜单>>纯css仿京东商城左侧二级导航(2018-05-23)

纯css仿京东商城左侧二级导航

纯css仿京东商城左侧二级导航
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="lanren">  
  2.         <div id="nav-2015">  
  3.             <div id="category-2015" onMouseOver="this.className='on'" onmouseleave="this.className=''">  
  4.                 <div class="ld">  
  5.                     <h2>全部商品分类<b></b></h2>  
  6.                 </div>  
  7.                 <div id="allsort">  
  8.                     <div class="item" onMouseOver="this.className='item on'" onmouseleave="this.className='item'">  
  9.                         <span><h3><a href="#">图书</a>、<a href="#">音像</a>、<a href="#">数字商品</a></h3></span>  
  10.                         <div class="i-mc">图书二级导航内容</div>  
  11.                     </div>  
  12.                     <div class="item" onMouseOver="this.className='item on'" onmouseleave="this.className='item'">  
  13.                         <span><h3><a href="#">家用电器</a></h3></span>  
  14.                         <div class="i-mc">家用电器二级导航内容</div>  
  15.                     </div>  
  16.                     <div class="item" onMouseOver="this.className='item on'" onmouseleave="this.className='item'">  
  17.                         <span><h3><a href="#">手机</a>、<a href="#">数码</a>、<a href="#">京东通信</a></h3></span>  
  18.                         <div class="i-mc">手机二级导航内容</div>  
  19.                     </div>  
  20.                     <div class="item" onMouseOver="this.className='item on'" onmouseleave="this.className='item'">  
  21.                         <span><h3><a href="#">电脑</a>、<a href="#">办公</a></h3></span>  
  22.                         <div class="i-mc">电脑二级导航内容</div>  
  23.                     </div>  
  24.                     <div class="item" onMouseOver="this.className='item on'" onmouseleave="this.className='item'">  
  25.                         <span><h3><a href="#">家居</a>、<a href="#">家具</a>、<a href="#">家装</a></h3></span>  
  26.                         <div class="i-mc">家居二级导航内容</div>  
  27.                     </div>  
  28.                     <div class="item" onMouseOver="this.className='item on'" onmouseleave="this.className='item'">  
  29.                         <span><h3><a href="#">男装</a>、<a href="#">女装</a>、<a href="#">内衣</a>、<a href="#">珠宝</a></h3></span>  
  30.                         <div class="i-mc">男装二级导航内容</div>  
  31.                     </div>  
  32.                     <div class="item" onMouseOver="this.className='item on'" onmouseleave="this.className='item'">  
  33.                         <span><h3><a href="#">鞋袜</a>、<a href="#">箱包</a>、<a href="#">钟表</a>、<a href="#">奢侈品</a></h3></span>  
  34.                         <div class="i-mc">鞋袜二级导航内容</div>  
  35.                     </div>  
  36.                     <div class="item" onMouseOver="this.className='item on'" onmouseleave="this.className='item'">  
  37.                         <span><h3><a href="#">个护化妆</a></h3></span>  
  38.                         <div class="i-mc">个护化妆二级导航内容</div>  
  39.                     </div>  
  40.                     <div class="item" onMouseOver="this.className='item on'" onmouseleave="this.className='item'">  
  41.                         <span><h3><a href="#">运动户外</a></h3></span>  
  42.                         <div class="i-mc">运动户外二级导航内容</div>  
  43.                     </div>  
  44.                     <div class="item" onMouseOver="this.className='item on'" onmouseleave="this.className='item'">  
  45.                         <span><h3><a href="#">汽车</a>、<a href="#">汽车用品</a></h3></span>  
  46.                         <div class="i-mc">汽车二级导航内容</div>  
  47.                     </div>  
  48.                     <div class="item" onMouseOver="this.className='item on'" onmouseleave="this.className='item'">  
  49.                         <span><h3><a href="#">女婴</a>、<a href="#">玩具乐器</a></h3></span>  
  50.                         <div class="i-mc">女婴二级导航内容</div>  
  51.                     </div>  
  52.                     <div class="item" onMouseOver="this.className='item on'" onmouseleave="this.className='item'">  
  53.                         <span><h3><a href="#">食品饮料</a>、<a href="#">酒类</a>、<a href="#">生鲜</a></h3></span>  
  54.                         <div class="i-mc">食品饮料二级导航内容</div>  
  55.                     </div>  
  56.                     <div class="item" onMouseOver="this.className='item on'" onmouseleave="this.className='item'">  
  57.                         <span><h3><a href="#">营养保健</a></h3></span>  
  58.                         <div class="i-mc">营养保健二级导航内容</div>  
  59.                     </div>  
  60.                 </div>  
  61.             </div>  
  62.             <div id="navitems-2015">  
  63.                 <li><a href="#">首页</a></li>  
  64.                 <li><a href="#">服装城</a></li>  
  65.                 <li><a href="#">美食</a></li>  
  66.                 <li><a href="#">团购</a></li>  
  67.                 <li><a href="#">夺宝岛</a></li>  
  68.                 <li><a href="#">闪购</a></li>  
  69.                 <li><a href="#">金融</a></li>  
  70.                 <li><a href="#">智能</a></li>  
  71.             </div>  
  72.         </div>  
  73.     </div>  

 


原文地址:http://www.freejs.net/article_daohangcaidan_651.html