css div ul li 导航栏(横向）：（纯CSS 多级菜单IE6能支持的）

最新推荐文章于 2022-04-14 00:18:45 发布
最新推荐文章于 2022-04-14 00:18:45 发布
阅读量135 收藏
点赞数
原文链接：http://www.cnblogs.com/dudu837/archive/2010/11/16/1878558.html
版权

这部分最后给出的成品效果比较惊人，也就是传说中的纯CSS六级菜单。这个东西最厉害的地方是兼容所有主流浏览器（IE6，IE8，Maxthon2.5，firefox3.5，opera10，safari4与chrome2），而一点CSS hack也没有用。毕竟CSS hack只是权宜之计，治标不治本，谁知它会对未来新版本的浏览器有什么副作用，因此能不用就不要用了。由于结构非常有规律，读者认真学习后，可以自行扩展为十级菜单。

纯CSS多级菜单

由于IE6能支持的伪类少得可怜，仅支持a元素的hover与visited与active。为了显示隐藏的二级菜单，我们必须把二级菜单的那个无序列表放到a元素下，但这样一来firefox那边又发难了。这时我们就要请出IE的条件注释，让页面在IE6下呈现一套结构层，在其他浏览器下呈现另一套。

01. <div class="menu">
02.   <ul>
03.     <li>
04.       <a href="http://www.cnblogs.com/rubylouvre/">菜单三<!--[if !IE 6]><!--></a><![endif]-->
05.       <ul>
06.         <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_11</a></li>
07.         <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_12</a></li>
08.       </ul>
09.       <!--[if lte IE 6]></a><![endif]-->
10.     </li>
11.     <li>
12.       <a href="http://www.cnblogs.com/rubylouvre/">菜单二<!--[if !IE 6]><!-->二</a><![endif]-->
13.       <ul>
14.         <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_11</a></li>
15.         <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_12</a></li>
16.       </ul>
17.       <!--[if lte IE 6]></a><![endif]-->
18.     </li>
19.     <li>
20.       //************略***********
21.     </li>
22.     <li>
23.       //************略***********
24.     </li>
25.   </ul>
26. </div>

<!doctype html> <title>纯CSS多级菜单by 司徒正美</title> <meta charset="utf-8"/> <meta name="keywords" content="纯CSS多级菜单 by 司徒正美" /> <meta name="description" content="纯CSS多级菜单 by 司徒正美" /> </head> <body> <style type="text/css"> * { margin:0; padding:0; } .menu { font-size:12px; } .menu li {/*水平菜单*/ float:left; list-style:none; position:relative;/*把包含块移动li元素*/ } .menu a { display:block; /*position:relative;发现放在a元素中， 在标准游览器中惨不忍睹， 和纯CSS相册3的第一个运行框在chrome中遇到的bug一样*/ height:32px; width:100px; line-height:32px; background:#a9ea00; color:#ff8040; text-decoration:none; text-align:center; } .menu a:hover { background:#369; color:#fff; } /*新增的二级菜单部分*/ .menu ul ul { visibility:hidden;/*开始时是隐藏的*/ position:absolute; left:0px; top:32px; } .menu ul li:hover ul,/*非IE6*/ .menu ul a:hover ul{/*IE6*/ visibility:visible; } .menu ul ul li { clear:both;/*垂直显示*/ text-align:left; } .menu ul li a strong{ color:aqua; } </style> <h1>纯CSS多级菜单 by 司徒正美</h1> <div class="menu"> <ul> <li> <a href="http://www.cnblogs.com/rubylouvre/">菜单<!--[if !IE 6]><!--><strong>一</strong></a><![endif]--> <ul> <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_11</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_12</a></li> </ul> <!--[if lte IE 6]></a><![endif]--> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/">菜单<!--[if !IE 6]><!--><strong>二</strong></a><![endif]--> <ul> <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_11</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_12</a></li> </ul> <!--[if lte IE 6]></a><![endif]--> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/">菜单<!--[if !IE 6]><!--><strong>三</strong></a><![endif]--> <ul> <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_31</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_32</a></li> </ul> <!--[if lte IE 6]></a><![endif]--> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/">菜单<!--[if !IE 6]><!--><strong>四</strong></a><![endif]--> <ul> <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_41</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_42</a></li> </ul> <!--[if lte IE 6]></a><![endif]--> </li> </ul> </div> </body> </html>

运行代码

但是这样做不能使IE6的二级菜单弹出来，这情形我在纯CSS相册遇到许多次。查一下国外的资料，说是IE用hover切换绝对定位子元素时存在问题，但具体情形又分许多种，解法也不一。但针对多级菜单的这种多层子元素，最常用的方法是把它们套在table中，这相当于table布局。因为table的容错能力是最强的，这多得人们一直用它来布局，于是浏览器一直在增强它在这方面的优势。感谢table，我们终于收拾IE6这个怪胎了。

01. <div class="menu">
02.     <ul>
03.       <li>
04.         <a href="http://www.cnblogs.com/rubylouvre/">菜单<!--[if !IE 6]><!--><strong>一</strong></a><![endif]-->
05.         <table><tr><td>
06.               <ul>
07.                 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_11</a></li>
08.                 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_12</a></li>
09.               </ul>
10.         </td></tr></table>
11.         <!--[if lte IE 6]></a><![endif]-->
12.       </li>
13.       <li>
14.         <a href="http://www.cnblogs.com/rubylouvre/">菜单<!--[if !IE 6]><!--><strong>二</strong></a><![endif]-->
15.         <table><tr><td>
16.               <ul>
17.                 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_11</a></li>
18.                 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_12</a></li>
19.               </ul>
20.         </td></tr></table>
21.         <!--[if lte IE 6]></a><![endif]-->
22.       </li>
23.       <li>
24.         //*************略**************
25.       </li>
26.       <li>
27.         //*************略**************
28.       </li>
29.     </ul>
30.   </div>

<!doctype html> <title>纯CSS多级菜单by 司徒正美</title> <meta charset="utf-8"/> <meta name="keywords" content="纯CSS多级菜单 by 司徒正美" /> <meta name="description" content="纯CSS多级菜单 by 司徒正美" /> </head> <body> <style type="text/css"> * { margin:0; padding:0; } .menu { font-size:12px; } .menu li {/*水平菜单*/ float:left; list-style:none; position:relative;/*把包含块移动li元素*/ } .menu a { display:block; /*position:relative;发现放在a元素中， 在标准游览器中惨不忍睹， 和纯CSS相册3的第一个运行框在chrome中遇到的bug一样*/ height:32px; width:100px; line-height:32px; background:#a9ea00; color:#ff8040; text-decoration:none; text-align:center; } .menu a:hover { background:#369; color:#fff; } /*新增的二级菜单部分*/ .menu ul ul { visibility:hidden;/*开始时是隐藏的*/ position:absolute; left:0px; top:32px; } .menu ul li:hover ul,/*非IE6*/ .menu ul a:hover ul{/*IE6*/ visibility:visible; } .menu ul ul li { clear:both;/*垂直显示*/ text-align:left; } .menu ul li a strong{ color:aqua; } </style> <h1>纯CSS多级菜单 by 司徒正美</h1> <div class="menu"> <ul> <li> <a href="http://www.cnblogs.com/rubylouvre/">菜单<!--[if !IE 6]><!--><strong>一</strong></a><![endif]--> <table><tr><td> <ul> <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_11</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_12</a></li> </ul> </td></tr></table> <!--[if lte IE 6]></a><![endif]--> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/">菜单<!--[if !IE 6]><!--><strong>二</strong></a><![endif]--> <table><tr><td> <ul> <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_11</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_12</a></li> </ul> </td></tr></table> <!--[if lte IE 6]></a><![endif]--> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/">菜单<!--[if !IE 6]><!--><strong>三</strong></a><![endif]--> <table><tr><td> <ul> <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_31</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_32</a></li> </ul> </td></tr></table> <!--[if lte IE 6]></a><![endif]--> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/">菜单<!--[if !IE 6]><!--><strong>四</strong></a><![endif]--> <table><tr><td> <ul> <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_41</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_42</a></li> </ul> </td></tr></table> <!--[if lte IE 6]></a><![endif]--> </li> </ul> </div> </body> </html>

运行代码

但这样一来对firefox等浏览器添加了许多多余的结构层代码，它们基本不需要table这东西就能运作良好。因此，我们把table整到IE条件注释中。如：

01. <div class="menu">
02.     <ul>
03.       <li>
04.         <a href="http://www.cnblogs.com/rubylouvre/">菜单
05.         <!--[if !IE 6]><!--><strong>一</strong></a><![endif]-->
06.         <!--[if lte IE 6]><table><tr><td><![endif]-->
07.         <ul>
08.           <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_11</a></li>
09.           <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_12</a></li>
10.         </ul>
11.         <!--[if lte IE 6]></td></tr></table></a><![endif]-->
12.       </li>
13.       <li>
14.         //*************略************
15.       </li>
16.       <li>
17.         //*************略************
18.       </li>
19.       <li>
20.        //*************略************
21.       </li>
22.     </ul>
23.   </div>

<!doctype html> <title>纯CSS多级菜单by 司徒正美</title> <meta charset="utf-8"/> <meta name="keywords" content="纯CSS多级菜单 by 司徒正美" /> <meta name="description" content="纯CSS多级菜单 by 司徒正美" /> </head> <body> <style type="text/css"> * { margin:0; padding:0; } .menu { font-size:12px; } .menu li {/*水平菜单*/ float:left; list-style:none; position:relative;/*把包含块移动li元素*/ } .menu a { display:block; /*position:relative;发现放在a元素中， 在标准游览器中惨不忍睹， 和纯CSS相册3的第一个运行框在chrome中遇到的bug一样*/ height:32px; width:100px; line-height:32px; background:#a9ea00; color:#ff8040; text-decoration:none; text-align:center; } .menu a:hover { background:#369; color:#fff; } /*新增的二级菜单部分*/ .menu ul ul { visibility:hidden;/*开始时是隐藏的*/ position:absolute; left:0px; top:32px; } .menu ul li:hover ul,/*非IE6*/ .menu ul a:hover ul{/*IE6*/ visibility:visible; } .menu ul ul li { clear:both;/*垂直显示*/ text-align:left; } </style> <h1>纯CSS多级菜单 by 司徒正美</h1> <div class="menu"> <ul> <li> <a href="http://www.cnblogs.com/rubylouvre/">菜单一 <!--[if !IE 6]><!--></a><![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_11</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_12</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/">菜单二 <!--[if !IE 6]><!--></a><![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_21</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_22</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/">菜单三 <!--[if !IE 6]><!--></a><![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_31</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_32</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/">菜单四 <!--[if !IE 6]><!--></a><![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_41</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_42</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> </div> </body> </html>

运行代码

然而，这结构层还能进一步精简。同时我们应该留意到IE6水平菜单的异常高度，这是IE6的li元素在包含块级显示元素时会多出5px空隙。由于li元素包含的结构比较复杂，以前用对付img元素的几种方法行不通了。我们可以显式设置a元素的高度，让多余的部分隐藏掉就是。这就唯一不用CSS hack的方法。

更精简的结构层：

01. <div class="menu">
02.    <ul>
03.      <li>
04.        <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->
05.        <a href="http://www.cnblogs.com/rubylouvre/">菜单一</a>
06.        <ul>
07.          <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_11</a></li>
08.          <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_12</a></li>
09.        </ul>
10.        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
11.      </li>
12.      <li>
13.         //***********略*********
14.      </li>
15.      <li>
16.         //***********略*********
17.      </li>
18.      <li>
19.         //***********略*********
20.      </li>
21.    </ul>
22.  </div>
01. .menu a {
02.   display:block;
03.   /*position:relative;发现放在a元素中，
04.   在标准游览器中惨不忍睹，
05.   和纯CSS相册3的第一个运行框在chrome中遇到的bug一样*/
06.   height:32px;
07.   width:100px;
08.   line-height:32px;
09.   background:#a9ea00;
10.   color:#ff8040;
11.   text-decoration:none;
12.   text-align:center;
13.   overflow:hidden;/*★★★★*/
14. }

<!doctype html> <title>纯CSS多级菜单by 司徒正美</title> <meta charset="utf-8"/> <meta name="keywords" content="纯CSS多级菜单 by 司徒正美" /> <meta name="description" content="纯CSS多级菜单 by 司徒正美" /> </head> <body> <style type="text/css"> * { margin:0; padding:0; } .menu { font-size:12px; } .menu li {/*水平菜单*/ float:left; list-style:none; position:relative;/*把包含块移动li元素*/ } .menu a { display:block; /*position:relative;发现放在a元素中， 在标准游览器中惨不忍睹， 和纯CSS相册3的第一个运行框在chrome中遇到的bug一样*/ height:32px; width:100px; line-height:32px; background:#a9ea00; color:#ff8040; text-decoration:none; text-align:center; overflow:hidden;/*★★★★*/ } .menu a:hover { background:#369; color:#fff; } /*新增的二级菜单部分*/ .menu ul ul { visibility:hidden;/*开始时是隐藏的*/ position:absolute; left:0px; top:32px; } .menu ul li:hover ul,/*非IE6*/ .menu ul a:hover ul{/*IE6*/ visibility:visible; } .menu ul ul li { clear:both;/*垂直显示*/ text-align:left; } </style> <h1>纯CSS多级菜单 by 司徒正美</h1> <div class="menu"> <ul> <li> <!--[if lte IE 6]><a href=""><table><tr><td><![endif]--> <a href="http://www.cnblogs.com/rubylouvre/">菜单一</a> <ul> <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_11</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_12</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li> <!--[if lte IE 6]><a href=""><table><tr><td><![endif]--> <a href="http://www.cnblogs.com/rubylouvre/">菜单二</a> <ul> <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_21</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_22</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li> <!--[if lte IE 6]><a href=""><table><tr><td><![endif]--> <a href="http://www.cnblogs.com/rubylouvre/">菜单三</a> <ul> <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_31</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_32</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li> <!--[if lte IE 6]><a href=""><table><tr><td><![endif]--> <a href="http://www.cnblogs.com/rubylouvre/">菜单四</a> <ul> <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_41</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_42</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> </div> </body> </html>

运行代码

基于上面的结构我们就可以开发多级子菜单了。

<!doctype html> <title>纯CSS多级菜单by 司徒正美</title> <meta charset="utf-8"/> <meta name="keywords" content="纯CSS多级菜单 by 司徒正美" /> <meta name="description" content="纯CSS多级菜单 by 司徒正美" /> </head> <body> <style type="text/css"> * { margin:0; padding:0; } .menu { font-size:12px; } .menu li {/*水平菜单*/ float:left; list-style:none; position:relative;/*把包含块移动li元素*/ } .menu a { display:block; height:32px; width:100px; line-height:32px; background:#a9ea00; color:#ff8040; text-decoration:none; text-align:center; overflow:hidden;/*★★★★*/ } .menu a:hover { background:#369; color:#fff; } /*新增的二级菜单部分*/ .menu ul ul { visibility:hidden;/*隐藏所有子菜单（二级的三级）*/ position:absolute; left:0px; top:32px; } /*指定是显示二级子菜单*/ .menu ul li:hover ul.second,/*非IE6*/ .menu ul a:hover ul.second{/*IE6*/ visibility:visible; } .menu ul ul li { clear:both;/*垂直显示*/ text-align:left; } .menu .third,.menu .fourth{ top:0px;/*重设子菜单相对于包含块哪个位置出现*/ left:100px; } /*指定是显示三级子菜单*/ .menu ul ul li:hover ul.third, .menu ul ul a:hover ul.third{ visibility:visible; } /*指定是显示三级子菜单*/ .menu ul ul ul li:hover ul.fourth, .menu ul ul ul a:hover ul.fourth{ visibility:visible; } /*重设子菜单在鼠标滑过时的样式，有多少个ul就表明当前是多少级子菜单*/ /*二级子菜单*/ .menu ul ul a:hover{ background:black; color:white; } /*三级子菜单*/ .menu ul ul ul a:hover{ background:#B45B3E; color:white; } .menu ul ul ul ul a:hover{ background:#FFE8AA; color:#68DFFB; } </style> <h1>这是可是四级菜单哦！</h1> <div class="menu"> <ul> <li> <!--[if lte IE 6]><a href=""><table><tr><td><![endif]--> <a href="http://www.cnblogs.com/rubylouvre/">菜单一</a> <ul class="second"> <li> <!--[if lte IE 6]><a href=""><table><tr><td><![endif]--> <a href="http://www.cnblogs.com/rubylouvre/">二级菜单_11</a> <ul class="third"> <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_11</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_12</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_13</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_14</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li> <!--[if lte IE 6]><a href=""><table><tr><td><![endif]--> <a href="http://www.cnblogs.com/rubylouvre/">二级菜单_12</a> <ul class="third"> <li> <!--[if lte IE 6]><a href=""><table><tr><td><![endif]--> <a href="http://www.cnblogs.com/rubylouvre/">三级菜单_21</a> <ul class="fourth"> <li><a href="http://www.cnblogs.com/rubylouvre/">四级菜单_31</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">四级菜单_32</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_22</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_23</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_24</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li> <!--[if lte IE 6]><a href=""><table><tr><td><![endif]--> <a href="http://www.cnblogs.com/rubylouvre/">菜单二</a> <ul class="second"> <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_21</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_22</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li> <!--[if lte IE 6]><a href=""><table><tr><td><![endif]--> <a href="http://www.cnblogs.com/rubylouvre/">菜单三</a> <ul class="second"> <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_31</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_32</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li> <!--[if lte IE 6]><a href=""><table><tr><td><![endif]--> <a href="http://www.cnblogs.com/rubylouvre/">菜单四</a> <ul class="second"> <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_41</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_42</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> </div> </body> </html>

运行代码

这时我们又发现在IE6下，当我们的鼠标移到二级菜单的上面时，一级菜单项会出现一个边框，颜色为hover时的背景色。在IE6，table与单元格之间(cellspacing)，单元格与单元格的内容之间(cellspadding)是存在空隙，背景色为transparent，也就是说永远显示下一层的背景色。由于我们设置a的display:block，它会占满td的所有空间，因此那个神秘的边框应该是cellspacing。我们可以用以下的方式证实我的猜想。

1. .menu table {
2.   border:1px solid aqua;
3. }
4. .menu table td{
5.   border:1px solid aqua;
6. }

<!doctype html> <title>纯CSS多级菜单by 司徒正美</title> <meta charset="utf-8"/> <meta name="keywords" content="纯CSS多级菜单 by 司徒正美" /> <meta name="description" content="纯CSS多级菜单 by 司徒正美" /> </head> <body> <style type="text/css"> * { margin:0; padding:0; } .menu { font-size:12px; } .menu li {/*水平菜单*/ float:left; list-style:none; position:relative;/*把包含块移动li元素*/ } .menu a { display:block; height:32px; width:100px; line-height:32px; background:#a9ea00; color:#ff8040; text-decoration:none; text-align:center; overflow:hidden;/*★★★★*/ } .menu a:hover { background:#369; color:#fff; } /*新增的二级菜单部分*/ .menu ul ul { visibility:hidden;/*隐藏所有子菜单（二级的三级）*/ position:absolute; left:0px; top:32px; } /*指定是显示二级子菜单*/ .menu ul li:hover ul.second,/*非IE6*/ .menu ul a:hover ul.second{/*IE6*/ visibility:visible; } .menu ul ul li { clear:both;/*垂直显示*/ text-align:left; } .menu .third,.menu .fourth{ top:0px;/*重设子菜单相对于包含块哪个位置出现*/ left:100px; } /*指定是显示三级子菜单*/ .menu ul ul li:hover ul.third, .menu ul ul a:hover ul.third{ visibility:visible; } /*指定是显示三级子菜单*/ .menu ul ul ul li:hover ul.fourth, .menu ul ul ul a:hover ul.fourth{ visibility:visible; } /*重设子菜单在鼠标滑过时的样式，有多少个ul就表明当前是多少级子菜单*/ /*二级子菜单*/ .menu ul ul a:hover{ background:black; color:white; } /*三级子菜单*/ .menu ul ul ul a:hover{ background:#B45B3E; color:white; } .menu ul ul ul ul a:hover{ background:#FFE8AA; color:#68DFFB; } .menu table { border:1px solid aqua; } .menu table td{ border:1px solid aqua; } </style> <h1>这是可是四级菜单哦！</h1> <div class="menu"> <ul> <li> <!--[if lte IE 6]><a href=""><table><tr><td><![endif]--> <a href="http://www.cnblogs.com/rubylouvre/">菜单一</a> <ul class="second"> <li> <!--[if lte IE 6]><a href=""><table><tr><td><![endif]--> <a href="http://www.cnblogs.com/rubylouvre/">二级菜单_11</a> <ul class="third"> <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_11</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_12</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_13</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_14</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li> <!--[if lte IE 6]><a href=""><table><tr><td><![endif]--> <a href="http://www.cnblogs.com/rubylouvre/">二级菜单_12</a> <ul class="third"> <li> <!--[if lte IE 6]><a href=""><table><tr><td><![endif]--> <a href="http://www.cnblogs.com/rubylouvre/">三级菜单_21</a> <ul class="fourth"> <li><a href="http://www.cnblogs.com/rubylouvre/">四级菜单_31</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">四级菜单_32</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_22</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_23</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_24</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li> <!--[if lte IE 6]><a href=""><table><tr><td><![endif]--> <a href="http://www.cnblogs.com/rubylouvre/">菜单二</a> <ul class="second"> <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_21</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_22</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li> <!--[if lte IE 6]><a href=""><table><tr><td><![endif]--> <a href="http://www.cnblogs.com/rubylouvre/">菜单三</a> <ul class="second"> <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_31</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_32</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li> <!--[if lte IE 6]><a href=""><table><tr><td><![endif]--> <a href="http://www.cnblogs.com/rubylouvre/">菜单四</a> <ul class="second"> <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_41</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_42</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> </div> </body> </html>

运行代码

知道问题的所在，我们就可以对症下药了。解决方法有二。一是设置cellspacing等于零。由于cellspacing为DOM属性，非CSS属性，换言之，有多少个table我们就要写多少次。二是设置border-collapse 为collapse，因为这样会把table与它里面的td的border合而为一，这样它们之间的空隙也不复存在。我们当然选择第二种啦。

1. .menu table {
2.   border-collapse: collapse;
3. }

<!doctype html> <title>纯CSS多级菜单by 司徒正美</title> <meta charset="utf-8"/> <meta name="keywords" content="纯CSS多级菜单 by 司徒正美" /> <meta name="description" content="纯CSS多级菜单 by 司徒正美" /> </head> <body> <style type="text/css"> * { margin:0; padding:0; } .menu { font-size:12px; } .menu li {/*水平菜单*/ float:left; list-style:none; position:relative;/*把包含块移动li元素*/ } .menu a { display:block; height:32px; width:100px; line-height:32px; background:#a9ea00; color:#ff8040; text-decoration:none; text-align:center; overflow:hidden;/*★★★★*/ } .menu a:hover { background:#369; color:#fff; } /*新增的二级菜单部分*/ .menu ul ul { visibility:hidden;/*隐藏所有子菜单（二级的,三级的）*/ position:absolute; left:0px; top:32px; } /*指定是显示二级子菜单*/ .menu ul li:hover ul.second,/*非IE6*/ .menu ul a:hover ul.second{/*IE6*/ visibility:visible; } .menu ul ul li { clear:both;/*垂直显示*/ text-align:left; } .menu .third,.menu .fourth,.menu .fifth,.menu .sixth{ top:0px;/*重设子菜单相对于包含块哪个位置出现*/ left:100px; } /*指定是显示三级子菜单*/ .menu ul ul li:hover ul.third, .menu ul ul a:hover ul.third{ visibility:visible; } /*指定是显示四级子菜单*/ .menu ul ul ul li:hover ul.fourth, .menu ul ul ul a:hover ul.fourth{ visibility:visible; } /*指定是显示五级子菜单*/ .menu ul ul ul ul li:hover ul.fifth, .menu ul ul ul ul a:hover ul.fifth{ visibility:visible; } /*指定是显示六级子菜单*/ .menu ul ul ul ul ul li:hover ul.sixth, .menu ul ul ul ul ul a:hover ul.sixth{ visibility:visible; } /*重设子菜单在鼠标滑过时的样式，有多少个ul就表明当前是多少级子菜单*/ /*二级子菜单*/ .menu ul ul a:hover{ background:black; color:white; } /*三级子菜单*/ .menu ul ul ul a:hover{ background:#B45B3E; color:#369; } .menu ul ul ul ul a:hover{ background:#FFE8AA; color:#68DFFB; } .menu ul ul ul ul ul a:hover{ background:#8080C0; color:#F8F8F8; } .menu ul ul ul ul ul ul a:hover{ background:#f00; color:#000; } .menu table{ border-collapse:collapse; } </style> <h3>纯CSS多级菜单 by 司徒正美</h3> <p>这是六级菜单，只要页面够长，十级也能弄出来！</p> <div class="menu"> <ul> <li> <!--[if lte IE 6]><a href=""><table><tr><td><![endif]--> <a href="http://www.cnblogs.com/rubylouvre/">菜单一</a> <ul class="second"> <li> <!--[if lte IE 6]><a href=""><table><tr><td><![endif]--> <a href="http://www.cnblogs.com/rubylouvre/">二级菜单_11</a> <ul class="third"> <li> <!--[if lte IE 6]><a href=""><table><tr><td><![endif]--> <a href="http://www.cnblogs.com/rubylouvre/">三级菜单_11</a> <ul class="fourth"> <li> <!--[if lte IE 6]><a href=""><table><tr><td><![endif]--> <a href="http://www.cnblogs.com/rubylouvre/">四级菜单_11</a> <ul class="fifth"> <li> <!--[if lte IE 6]><a href=""><table><tr><td><![endif]--> <a href="http://www.cnblogs.com/rubylouvre/">五级菜单_11</a> <ul class="sixth"> <li><a href="http://www.cnblogs.com/rubylouvre/">六级菜单_11</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">六级菜单_12</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">六级菜单_13</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li> <!--[if lte IE 6]><a href=""><table><tr><td><![endif]--> <a href="http://www.cnblogs.com/rubylouvre/">五级菜单_11</a> <ul class="sixth"> <li><a href="http://www.cnblogs.com/rubylouvre/">六级菜单_11</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">六级菜单_12</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">六级菜单_13</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li> <!--[if lte IE 6]><a href=""><table><tr><td><![endif]--> <a href="http://www.cnblogs.com/rubylouvre/">五级菜单_11</a> <ul class="sixth"> <li><a href="http://www.cnblogs.com/rubylouvre/">六级菜单_11</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">六级菜单_12</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">六级菜单_13</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><!--[if lte IE 6]><a href=""><table><tr><td><![endif]--> <a href="http://www.cnblogs.com/rubylouvre/">五级菜单_12</a> <ul class="sixth"> <li><a href="http://www.cnblogs.com/rubylouvre/">六级菜单_11</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">六级菜单_12</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">六级菜单_13</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_12</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_13</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_14</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li> <!--[if lte IE 6]><a href=""><table><tr><td><![endif]--> <a href="http://www.cnblogs.com/rubylouvre/">二级菜单_12</a> <ul class="third"> <li> <!--[if lte IE 6]><a href=""><table><tr><td><![endif]--> <a href="http://www.cnblogs.com/rubylouvre/">三级菜单_21</a> <ul class="fourth"> <li><a href="http://www.cnblogs.com/rubylouvre/">四级菜单_21</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">四级菜单_22</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_22</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_23</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_24</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li> <!--[if lte IE 6]><a href=""><table><tr><td><![endif]--> <a href="http://www.cnblogs.com/rubylouvre/">菜单二</a> <ul class="second"> <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_21</a></li> <li> <!--[if lte IE 6]><a href=""><table><tr><td><![endif]--> <a href="http://www.cnblogs.com/rubylouvre/">二级菜单_22</a> <ul class="third"> <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_21</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_22</a></li> <li> <!--[if lte IE 6]><a href=""><table><tr><td><![endif]--> <a href="http://www.cnblogs.com/rubylouvre/">三级菜单_23</a> <ul class="fourth"> <li><a href="http://www.cnblogs.com/rubylouvre/">四级菜单_21</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">四级菜单_22</a></li> <li> <!--[if lte IE 6]><a href=""><table><tr><td><![endif]--> <a href="http://www.cnblogs.com/rubylouvre/">四级菜单_23</a> <ul class="fifth"> <li><a href="http://www.cnblogs.com/rubylouvre/">五级菜单_21</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">五级菜单_22</a></li> <li> <!--[if lte IE 6]><a href=""><table><tr><td><![endif]--> <a href="http://www.cnblogs.com/rubylouvre/">五级菜单_23</a> <ul class="sixth"> <li><a href="http://www.cnblogs.com/rubylouvre/">六级菜单_21</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">六级菜单_22</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">六级菜单_23</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">六级菜单_24</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">六级菜单_25</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">六级菜单_26</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li> <!--[if lte IE 6]><a href=""><table><tr><td><![endif]--> <a href="http://www.cnblogs.com/rubylouvre/">菜单三</a> <ul class="second"> <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_31</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_32</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li> <!--[if lte IE 6]><a href=""><table><tr><td><![endif]--> <a href="http://www.cnblogs.com/rubylouvre/">菜单四</a> <ul class="second"> <li> <!--[if lte IE 6]><a href=""><table><tr><td><![endif]--> <a href="http://www.cnblogs.com/rubylouvre/">二级菜单_41</a> <ul class="third"> <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_41</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_42</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_43</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_44</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_42</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> </div> </body> </html>

运行代码

司徒正美 纯CSS多级菜单

最后总结一下：

  • 保证hover时，对应的子菜单的top与left在包含块的范围内。
  • 通常我们是用hover来调用display实现子元素的隐现，但在IE6中，mouseout后它不会乖乖消失，得换visibility上阵。
  • 某些浏览器在用a:hover来切换绝对定位子元素存在bug，统一用li:hover实现。
  • 在IE6中，激活父级元素的a:hover后再调用其子孙元素的a:hover时，会没有反应，换言之，不继续向下渲染。这时我们需要table这个容错能力最强的标签出马。
  • 为了跨平台的需要，我们需要用到IE条件注释来切换相应的结构层代码。
  • 在IE6中，当li元素包含display为block的元素时（如a）会多出5px，我们可以用overflow:hidden收拾之。
  • 在IE6中，table与td是存在空隙，当我们移动某个子菜单项时，其父菜单项就会因为这些透明的空间而染上两条边。解决方法：设置table的border-collapse为collapse。

转载于:https://www.cnblogs.com/dudu837/archive/2010/11/16/1878558.html

weixin_30580943
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如何用CSS制作横向菜单?
04-13 1478
如何用CSS制作横向菜单?作者：阿捷 2005-4-11 16:54:52.test2 ul{list-style:none;}.test3 ul{list-style:none;}.test4 ul{list-style:none;}.test5 ul{list-style:none;width:300px;}.test3 li{float:left;}.test4 li
纯CSS多级菜单2
weixin_34072159的博客
09-28 73
这部分最后给出的成品效果比较惊人，也就是传说中的纯CSS六级菜单。这个东西最厉害的地方是兼容所有主流浏览器（IE6，IE8，Maxthon2.5，firefox3.5，opera10，safari4与chrome2），而一点CSS hack也没有用。毕竟CSS hack只是权宜之计，治标不治本，谁知它会对未来新版本的浏览器有什么副作用，因此能不用就不要用了。由于结构非常有规律，读者认真学习后，可以...
csc实例：用UL制作横向CSS导航菜单
twosecond
12-26 5523
前互联网站前端页面的大趋势是采用DIV+CSS构架，因为它不仅能更受搜索引擎青睐，而且一个良好结构的DIV架构网站可以从一定程度上提高页面的展示速度。在本教程中，我们将通过实例来给大家介绍：如何使用(X)HTML中的标签来制作一个简单横向导航菜单。为什么要用标签来制作导航栏和菜单栏？用UL做导航菜单之所以被广泛采用，主要是因为它的代码清晰，布局方便，更重要的是具有“语义”效果，能够方便进一
用HTML ul、li标签创建横向导航菜单
HXZz的博客
05-29 4765
用CSS样式对ul、li标签进行控制，实现横向导航菜单栏。 HTML代码： <div class="menu"> <ul> <li><a href="javascript:void(0);">菜单样式</a></li> <li><a href="javascript:void(0);">菜单样式</a></li> <li><a
前端_横向导航栏和商务表格
Mr.White的博客
04-14 1984
横向导航栏和商务表格一 、制作横向导航栏实现效果使用标签基本布局问题关键总代码二、商务风格表格的设计与实现实现效果使用标签基本布局问题关键总代码 一 、制作横向导航栏 实现效果 使用标签 <ul> <li></li> </ul> a:hover 基本布局 <body> <h4>导航栏菜单的设计与实现</h4> <hr /> <ul> <li
HTMl中<ul>标签中li横向排列
weixin_40133326的博客
07-30 4万+
  大多数的导航栏都是横向排列如下图所示，那么这究竟是怎么实现的呢？其实它主要运用&lt;ul&gt;标签中li的横向排列，下面以一个例子向大家详细讲解具体是如何实现的。 1编写横向菜单的HTML代码架构 &lt;ul id="menu"&gt; &lt;li&gt;&lt;a href="http://www.baidu.com"&gt;Baidu.Com&lt;/a&gt;
div+css+ul-li制作横向导航栏
12-31
div+css+ul-li制作横向导航栏，简洁清楚。原理清楚，适合学习。
用ul、li标签创建css横向导航菜单示例
01-19
创建CSS样式文本导航条的最简单解决方法也许就是把所有的链接都放在一行文本里，这种方法看起来很合理也很直观。但问题在于把所有的链接都放在一行文本里就很难控制链接之间以及前后的空白。所以，为了避免所有的...
纯CSS实现的多级下拉横向导航菜单代码
01-23
纯CSS实现的多级下拉横向导航菜单代码
UL、LI 无序列表实现纯CSS网站导航菜单
01-21
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...<... <head> <... charset=gb2312″ />...多行的导航栏</title> <style type=”text/css”> * { margin
纯CSS多级菜单(横向)
07-14
纯CSS多级菜单(横向)，HTML代码和CSS代码。使用时直接拷贝到网页即可
打造最美CSS多级下拉横向导航菜单代码
09-24
主要告诉大家如何打造最美CSS多级下拉横向导航菜单效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
css+ul设计的多级导航菜单
03-19
使用ul+css设计的多级导航菜单，不用写javascript脚本；要想加子菜单，直接往下面加ul标签及子标签就可以了
css横向导航菜单代码
09-19
css横向导航菜单css横向导航菜单css横向导航菜单
css横向导航菜单样式
09-19
css横向导航菜单css横向导航菜单css横向导航菜单
html网页横向一级菜单,Html用ul li实现多级横向菜单
weixin_39730671的博客
06-03 1543
第一步、编写横向菜单的HTML代码架构请将以下代码添加到HTML文档的导航栏区域中。ul li横向显示：display:inline-blocklist-style:none; /* 去掉ul前面的符号 */有些时候需要使用ul li 水平排列而不要换行，做法很简单，直接拷我的代码上来，注意红色部分就可以了：#canvaslist{&nbsp复制代码代码如下: 首页 实现效果如下...
li标签的横向排列
热门推荐
Wendy
10-19 7万+
       li标签的使用很广泛，在各种选项卡的制作，导航栏等都用到，那么li标签的横向排列也是经常用到。&lt;ul&gt;标签下的项目&lt;li&gt;默认是纵向排列的，我们需要定义额外的CSS属性让其横向排列，li标签的横向排列有两种实现方法，现总结如下：1、使用float:left      在这里顺便解释几个css样式的使用。       1）list-style:none,这个属性...
纯css制作的横向二级菜单 html
weixin_51343683的博客
11-14 837
效果图： 鼠标放到栏目5上时： <!doctype html> <html> <head> <style type="text/css"> .nav ul{list-style: none;} .nav ul li{float: left;} .nav ul li ul{display: none;} .nav ul li:hover ul{display: block;} .nav a{t
html中向上的菜单怎么写,向上展开的多级CSS菜单
weixin_39967670的博客
05-30 459
向上展开的多级CSS菜单#nav,#nav ul {padding:0 0 5px 0; margin:0; list-style:none; font: 10px verdana, sans-serif; border:1px solid #000; border-color:#ace #79b #68a #bde; border-width:1px 2px 2px 1px; backgroun...
css导航栏横向二级菜单
最新发布
11-05
这是一款使用jQuery和CSS实现的红色线条横向二级菜单效果。它带有导航菜单，当前选中的菜单项会以个性化的方式显示出来。当鼠标悬停在菜单上时，会显示菜单缺口。这是一个简单的二级导航栏，但实际上，我们通常看到...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值