设为首页收藏本站订阅更新

无忧脚本

 找回密码
 加入无忧

QQ登录

只需一步,快速开始

搜索
查看: 3593|回复: 2

[原创] 原生css二级下拉菜单

[复制链接]
发表于 2013-9-20 09:27:31 | 显示全部楼层 |阅读模式
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title></title>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.         <style>
  7.         ul,li{list-style:none;}
  8.         a{text-decoration:none;}
  9.         *{margin:0; padding:0;}
  10.         #Box{width:40%; height:200px; margin:200px auto; position:relative;}
  11.         ul{width:100%; height:30px;}
  12.         li{width:20%; height:30px; float:left; background:#CCCCCC; text-align:center;}
  13.         li:hover{background:#EEEEEE;}
  14.         li .d_up{width:100%; height:30px; clear:both;}
  15.         li .d_up a{display:block; width:100%; height:100%;}
  16.         li .d_up a:hover{color:#0099FF;}
  17.         li .d_down{width:100%; height:120px; clear:both; display:none;}
  18.         #Box ul li:hover .d_down{display:block;}
  19.         li .d_down a{display:block; height:25%; width:100%; background:#FFCCCC;}
  20.         li .d_down a:hover{background:#FFFFCC;}
  21.         </style>
  22. </head>
  23. <body>
  24. <div id="Box">
  25.         <ul>
  26.                 <li>
  27.                         <div class="d_up">
  28.                                 <a href="#">1</a>
  29.                         </div>
  30.                         <div class="d_down">
  31.                                 <a href="#">1</a>
  32.                                 <a href="#">2</a>
  33.                                 <a href="#">3</a>
  34.                                 <a href="#">4</a>
  35.                         </div>
  36.                 </li>
  37.                 <li>
  38.                         <div class="d_up">
  39.                                 <a href="#">1</a>
  40.                         </div>
  41.                         <div class="d_down">
  42.                                 <a href="#">1</a>
  43.                                 <a href="#">2</a>
  44.                                 <a href="#">3</a>
  45.                                 <a href="#">4</a>
  46.                         </div>
  47.                 </li>
  48.                 <li>
  49.                         <div class="d_up">
  50.                                 <a href="#">1</a>
  51.                         </div>
  52.                         <div class="d_down">
  53.                                 <a href="#">1</a>
  54.                                 <a href="#">2</a>
  55.                                 <a href="#">3</a>
  56.                                 <a href="#">4</a>
  57.                         </div>
  58.                 </li>
  59.                 <li>
  60.                         <div class="d_up">
  61.                                 <a href="#">1</a>
  62.                         </div>
  63.                         <div class="d_down">
  64.                                 <a href="#">1</a>
  65.                                 <a href="#">2</a>
  66.                                 <a href="#">3</a>
  67.                                 <a href="#">4</a>
  68.                         </div>
  69.                 </li>
  70.                 <li>
  71.                         <div class="d_up">
  72.                                 <a href="#">1</a>
  73.                         </div>
  74.                         <div class="d_down">
  75.                                 <a href="#">1</a>
  76.                                 <a href="#">2</a>
  77.                                 <a href="#">3</a>
  78.                                 <a href="#">4</a>
  79.                         </div>
  80.                 </li>
  81.         </ul>
  82. </div>
  83. </body>
  84. </html>
复制代码
如果想要多级菜单可以继续添加哦,!。
 楼主| 发表于 2013-9-20 09:31:47 | 显示全部楼层
不知道原来这个编辑器不支持行外样式,!。可以另存再运行哈,!。小爬虫就是孤陋寡闻啊,桑不起,!。
 楼主| 发表于 2013-9-20 09:35:37 | 显示全部楼层
本来打算改成行内样式的,!。可素:hover伪类是不支持行内样式,!。木有办法啦,!。这个css下拉菜单就是基于:hover实现的,!。
您需要登录后才可以回帖 登录 | 加入无忧

本版积分规则

小黑屋|手机版|Archiver|无忧脚本 ( 苏ICP备05080427号 )|值班电话:027-62300445   鄂公网安备 42011102000433号

GMT+8, 2018-12-11 14:40 , Processed in 0.084251 second(s), 7 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表