免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
新浪微博
QQ空间
Facebook
Google+
Plurk
Twitter
Line
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]-->

  14. </head>

  16. <body>

  18. <div id="menu">

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

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

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

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

  89. 　　　<li><a href="#"  class="nodrop">联系我们</a></li>
  90.    
  91. </ul>

  93. </div>

  95. </body>
  96. </html>
複製代碼


圖片附件: 20120311072937850.jpg (2012-5-27 10:25, 21.23 KB) / 下載次數 735
http://www.sclub.com.tw/discuz/attachment.php?aid=4483&k=107470913a583930be97d86aaf78bd39&t=1714393617&sid=y1xbWY

作者: 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://www.sclub.com.tw/discuz/) Powered by Discuz! 7.2