首页>>导航菜单>>纯css商城网站常用左侧分类下拉导航菜单代码(2018-08-09)

纯css商城网站常用左侧分类下拉导航菜单代码

本例只有css，没有js

纯css商城网站常用左侧分类下拉导航菜单代码
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="menu">  
  2. <div class="menuTop">全部商品分类</div>  
  3. <ul>  
  4.    
  5.   <li> <a herf="javascript:;">一级标题 1</a> <span></span>  
  6.     <div class="submenu">  
  7.       <div class="subleft">  
  8.         <dl>  
  9.           <dt>二级标题111</dt>  
  10.           <dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>  
  11.         </dl>  
  12.         <dl>  
  13.           <dt>二级标题</dt>  
  14.           <dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>  
  15.         </dl>  
  16.         <dl>  
  17.           <dt>二级标题</dt>  
  18.           <dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>  
  19.         </dl>  
  20.         <dl>  
  21.           <dt>二级标题</dt>  
  22.           <dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>  
  23.         </dl>  
  24.       </div>  
  25.       <div class="subright" style="background-color: antiquewhite"> </div>  
  26.     </div>  
  27.   </li>  
  28.     
  29.     
  30.   <li> <a herf="javascript:;">一级标题 2</a> <span></span>  
  31.     <div class="submenu">  
  32.     <div class="subleft">  
  33.       <dl>  
  34.         <dt>二级标题222</dt>  
  35.         <dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>  
  36.       </dl>  
  37.       <dl>  
  38.         <dt>二级标题</dt>  
  39.         <dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>  
  40.       </dl>  
  41.       <dl>  
  42.         <dt>二级标题</dt>  
  43.         <dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>  
  44.       </dl>  
  45.       <dl>  
  46.         <dt>二级标题</dt>  
  47.         <dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题2</a> </dd>  
  48.       </dl>  
  49.     </div>  
  50.     <div class="subright" style="background-color:aquamarine"> </div>  
  51.   </li>  
  52.     
  53.     
  54.   <li> <a herf="javascript:;">一级标题 3</a> <span></span>  
  55.     <div class="submenu">  
  56.     <div class="subleft">  
  57.       <dl>  
  58.         <dt>二级标题333</dt>  
  59.         <dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>  
  60.       </dl>  
  61.       <dl>  
  62.         <dt>二级标题</dt>  
  63.         <dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>  
  64.       </dl>  
  65.       <dl>  
  66.         <dt>二级标题</dt>  
  67.         <dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>  
  68.       </dl>  
  69.       <dl>  
  70.         <dt>二级标题</dt>  
  71.         <dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题3</a> </dd>  
  72.       </dl>  
  73.     </div>  
  74.     <div class="subright" style="background-color:cadetblue"> </div>  
  75.   </li>  
  76.     
  77.     
  78.   <li> <a herf="javascript:;">一级标题 4</a> <span></span>  
  79.     <div class="submenu">  
  80.     <div class="subleft">  
  81.       <dl>  
  82.         <dt>二级标题444</dt>  
  83.         <dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>  
  84.       </dl>  
  85.       <dl>  
  86.         <dt>二级标题</dt>  
  87.         <dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>  
  88.       </dl>  
  89.       <dl>  
  90.         <dt>二级标题</dt>  
  91.         <dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>  
  92.       </dl>  
  93.       <dl>  
  94.         <dt>二级标题</dt>  
  95.         <dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题4</a> </dd>  
  96.       </dl>  
  97.     </div>  
  98.     <div class="subright" style="background-color:darkgrey"> </div>  
  99.   </li>  
  100.     
  101.     
  102.   <li> <a herf="javascript:;">一级标题 5</a> <span></span>  
  103.     <div class="submenu">  
  104.     <div class="subleft">  
  105.       <dl>  
  106.         <dt>二级标题555</dt>  
  107.         <dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>  
  108.       </dl>  
  109.       <dl>  
  110.         <dt>二级标题</dt>  
  111.         <dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>  
  112.       </dl>  
  113.       <dl>  
  114.         <dt>二级标题</dt>  
  115.         <dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>  
  116.       </dl>  
  117.       <dl>  
  118.         <dt>二级标题</dt>  
  119.         <dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题5</a> </dd>  
  120.       </dl>  
  121.     </div>  
  122.     <div class="subright" style="background-color:darkseagreen"> </div>  
  123.   </li>  
  124.     
  125.     
  126.   <li> <a herf="javascript:;">一级标题 6</a> <span></span>  
  127.     <div class="submenu">  
  128.     <div class="subleft">  
  129.       <dl>  
  130.         <dt>二级标题666</dt>  
  131.         <dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>  
  132.       </dl>  
  133.       <dl>  
  134.         <dt>二级标题</dt>  
  135.         <dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>  
  136.       </dl>  
  137.       <dl>  
  138.         <dt>二级标题</dt>  
  139.         <dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>  
  140.       </dl>  
  141.       <dl>  
  142.         <dt>二级标题</dt>  
  143.         <dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题6</a> </dd>  
  144.       </dl>  
  145.     </div>  
  146.     <div class="subright" style="background-color:lavender"> </div>  
  147.   </li>  
  148.     
  149.     
  150.   <li> <a herf="javascript:;">一级标题 7</a> <span></span>  
  151.     <div class="submenu">  
  152.     <div class="subleft">  
  153.       <dl>  
  154.         <dt>二级标题777</dt>  
  155.         <dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>  
  156.       </dl>  
  157.       <dl>  
  158.         <dt>二级标题</dt>  
  159.         <dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>  
  160.       </dl>  
  161.       <dl>  
  162.         <dt>二级标题</dt>  
  163.         <dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>  
  164.       </dl>  
  165.       <dl>  
  166.         <dt>二级标题</dt>  
  167.         <dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题7</a> </dd>  
  168.       </dl>  
  169.     </div>  
  170.     <div class="subright"> </div>  
  171.   </li>  
  172.     
  173.     
  174.   <li> <a herf="javascript:;">一级标题 8</a> <span></span>  
  175.     <div class="submenu">  
  176.     <div class="subleft">  
  177.       <dl>  
  178.         <dt>二级标题888</dt>  
  179.         <dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>  
  180.       </dl>  
  181.       <dl>  
  182.         <dt>二级标题</dt>  
  183.         <dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>  
  184.       </dl>  
  185.       <dl>  
  186.         <dt>二级标题</dt>  
  187.         <dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>  
  188.       </dl>  
  189.       <dl>  
  190.         <dt>二级标题</dt>  
  191.         <dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题8</a> </dd>  
  192.       </dl>  
  193.     </div>  
  194.     <div class="subright" style="background-color:lightseagreen"> </div>  
  195.   </li>  
  196.   <li> <a herf="javascript:;">一级标题 9</a> <span></span>  
  197.     <div class="submenu">  
  198.     <div class="subleft">  
  199.       <dl>  
  200.         <dt>二级标题999</dt>  
  201.         <dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>  
  202.       </dl>  
  203.       <dl>  
  204.         <dt>二级标题</dt>  
  205.         <dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>  
  206.       </dl>  
  207.       <dl>  
  208.         <dt>二级标题</dt>  
  209.         <dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>  
  210.       </dl>  
  211.       <dl>  
  212.         <dt>二级标题</dt>  
  213.         <dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题9</a> </dd>  
  214.       </dl>  
  215.     </div>  
  216.     <div class="subright" style="background-color:mistyrose"> </div>  
  217.   </li>  
  218.     
  219.     
  220.   <li> <a herf="javascript:;">一级标题 10</a> <span></span>  
  221.     <div class="submenu">  
  222.     <div class="subleft">  
  223.       <dl>  
  224.         <dt>二级标题1010</dt>  
  225.         <dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>  
  226.       </dl>  
  227.       <dl>  
  228.         <dt>二级标题</dt>  
  229.         <dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>  
  230.       </dl>  
  231.       <dl>  
  232.         <dt>二级标题</dt>  
  233.         <dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>  
  234.       </dl>  
  235.       <dl>  
  236.         <dt>二级标题</dt>  
  237.         <dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题10</a> </dd>  
  238.       </dl>  
  239.     </div>  
  240.     <div class="subright" style="background-color:salmon"> </div>  
  241.   </li>  
  242.     
  243. </ul>  
  244.   
  245. </div>  

 


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