免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
Board logo

標題: [分享] 纯css打造绿色横向二级导航菜单代码 [打印本頁]

作者: y0y0    時間: 2012-5-27 07:50     標題: 纯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>
複製代碼


圖片附件: 20120311072937850.jpg (2012-5-27 10:25, 21.23 KB) / 下載次數 2826
http://funbbs.me/discuz/attachment.php?aid=4483&k=8448b00a6ed7e69f5f2f4f57fcb8de55&t=1732323207&sid=YyBsmH


作者: 0857    時間: 2012-5-27 07:51

謝謝分享~~ˊ ˇ ˋ
圖死啦.......
作者: 凌羽    時間: 2012-5-28 15:07

感谢分享~
作者: 秋枫    時間: 2012-5-28 17:54

謝謝分享!
作者: 52kd    時間: 2012-6-1 17:56

感谢分享
作者: jddl    時間: 2012-6-2 11:32

请问在哪放代码····
作者: lxqhl    時間: 2012-6-10 23:32

{:6_219:}呼呼哈哈
作者: k530131    時間: 2012-7-2 01:34

我正在製作一個網站就是需要這種島航!!
作者: youlancao    時間: 2012-7-12 18:18

请问此代码放在哪里?
作者: 章鱼    時間: 2012-7-12 21:04

这是纯CSS么.....
作者: fwiflof    時間: 2012-8-21 16:21

謝謝分享>W<
作者: 8686868    時間: 2012-8-21 17:05

非常谢谢!
作者: 大白兔    時間: 2012-8-23 18:34

想换个颜色》》》》》
作者: sanxiren    時間: 2012-9-9 00:33

回復 1# y0y0
代码放那啊?
作者: liangweisee    時間: 2012-11-14 14:19

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

回復 1# y0y0

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

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




歡迎光臨 SCLUB免費論壇申請-使用者論壇 (http://funbbs.me/discuz/) Powered by Discuz! 7.2