免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
返回列表 發帖

[分享] 纯css打造绿色横向二级导航菜单代码

本帖最後由 y0y0 於 2012-5-27 10:25 編輯

20120311072937850.jpg
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>纯css打造绿色横向二级导航菜单代码--免费模板</title>
  6. <link rel="stylesheet" href="http://cssdh.mianfeimoban.com/uploadfile/2012/0311/menu1/css/base.css" type="text/css" media="screen" />
  7. <!--[if IE 6]>
  8. <style>
  9. body {behavior: url("http://cssdh.mianfeimoban.com/uploadfile/2012/0311/menu1/csshover3.htc");}
  10. #menu li .drop {background:url("http://cssdh.mianfeimoban.com/uploadfile/2012/0311/menu1/images/arrow.gif") no-repeat right 14px;
  11. </style>
  12. <![endif]-->

  13. </head>

  14. <body>

  15. <div id="menu">

  16. <ul>
  17. <li><a href="#"  class="nodrop">首 页</a></li>
  18.    
  19. <li><a href="#" class="drop">免费模板</a>   
  20.                 <div class="dropdown_1column">        
  21.                 <div class="col_1">               
  22.                     <ul class="simple">
  23.                         <li><a href="#">导航菜单</a></li>
  24.                         <li><a href="#">导航条代码</a></li>
  25.                         <li><a href="#">免费模板</a></li>
  26.                         <li><a href="#">电子商务人才</a></li>
  27.                         <li><a href="#">网站推广</a></li>
  28.                         <li><a href="#">网站优化</a></li>
  29.                         <li><a href="#">网站制作</a></li>                     
  30.                     </ul>                        
  31.                 </div>               
  32.                 </div>        
  33.         </li>

  34. <li><a href="#" class="drop">网站建设</a>   
  35.                 <div class="dropdown_1column">        
  36.                 <div class="col_1">               
  37.                     <ul class="simple">
  38.                         <li><a href="#">导航条代码</a></li>
  39.                         <li><a href="#">导航条代码</a></li>
  40.                         <li><a href="#">免费模板</a></li>
  41.                         <li><a href="#">电子商务人才</a></li>
  42.                         <li><a href="#">网站推广</a></li>
  43.                         <li><a href="#">网站优化</a></li>
  44.                         <li><a href="#">网站制作</a></li>
  45.                     </ul>                        
  46.                 </div>               
  47.                 </div>        
  48.   </li>

  49.    <li><a href="#" class="drop">网络营销</a>   
  50.                 <div class="dropdown_1column">        
  51.                 <div class="col_1">               
  52.                     <ul class="simple">
  53.                         <li><a href="#">网站建设</a></li>
  54.                         <li><a href="#">导航条代码</a></li>
  55.                         <li><a href="#">免费模板</a></li>
  56.                         <li><a href="#">电子商务人才</a></li>
  57.                         <li><a href="#">网站推广</a></li>
  58.                         <li><a href="#">网站优化</a></li>
  59.                         <li><a href="#">网站制作</a></li>
  60.                     </ul>                        
  61.                 </div>               
  62.                 </div>        
  63.   </li>

  64.         <li><a href="#" class="drop">网络营销</a>   
  65.                 <div class="dropdown_1column">        
  66.                 <div class="col_1">               
  67.                     <ul class="simple">
  68.                        <li><a href="#">网站建设</a></li>
  69.                         <li><a href="#">导航条代码</a></li>
  70.                         <li><a href="#">免费模板</a></li>
  71.                         <li><a href="#">电子商务人才</a></li>
  72.                         <li><a href="#">网站推广</a></li>
  73.                         <li><a href="#">网站优化</a></li>
  74.                         <li><a href="#">网站制作</a></li>
  75.                     </ul>                        
  76.                 </div>               
  77.                 </div>        
  78.         </li>
  79.         
  80.    <li><a href="#"  class="nodrop">关于我们</a></li>

  81.    <li><a href="#"  class="nodrop">联系我们</a></li>
  82.    
  83. </ul>

  84. </div>

  85. </body>
  86. </html>
複製代碼

本帖最後由 liangweisee 於 2012-11-14 14:21 編輯

回復 1# y0y0

界面效果看上去不错。谢谢分享了。抱走~~~

P.S:说代码嘛没说放哪,这怎么行。

TOP

回復 1# y0y0
代码放那啊?

TOP

想换个颜色》》》》》

TOP

非常谢谢!

TOP

謝謝分享>W<

TOP

这是纯CSS么.....
章鱼之家代码站
 
 
 
 
 

TOP

请问此代码放在哪里?

TOP

我正在製作一個網站就是需要這種島航!!

TOP

{:6_219:}呼呼哈哈

TOP

返回列表