转载

纯CSS制作二级导航

一.问题描述

做一个类似校园网首页，主要是导航栏的设置，ul默认纵向排列，如何横向排列，同时去掉圆点。

二.问题解决

2.1 先写导航条

用两个ul嵌套，一个ul是横向导航条，另一个是每个小项目下连一个竖向的ul。

 1 <ul id="nav_ul">  2             <li>  3                 <a href="#">首页</a>  4                 <ul class="nav_ul_ul">  5                     <li>电信</li>  6                     <li>联通</li>  7                     <li>移动</li>  8                 </ul>  9             </li> 10 </ul>

2.2 html乱码

原来没加charset，后来百度了需要加上gb2312，依然乱码，改成utf-8就ok了。

1 <meta charset="UTF-8">

2.3 去掉小圆点

<style type="text/css">             #navigator ul             {                 list-style:none;             }                      </style>

2.4 ul横向排列

left就是1234，right就是4321。不过我发现并没有这么简单。

1 #navigator li 2             { 3                 float:left; 4             }

纯CSS制作二级导航

不过由于，div是用的id，二级ul也变成横向了。

查了资料我感觉可以这样写，果然对了。

1 #navigator ul li 2             { 3                 float:left; 4             } 5             #navigator ul li ul li 6             { 7                 float:none;

纯CSS制作二级导航

三.细节处理

3.1 鼠标滑过才弹出二级列表

首先定义嵌套的ul不显示,当鼠标划过li的时候下面的ul显示出来。

IE不显示效果，用搜狗可以。

1 #navigator ul li ul 2             { 3                 display:none; 4             } 5             #navigator ul li:hover ul 6             { 7                 display:block; 8             }

3.2 二级ul未和一级对齐

但是我们发现显示出来的二级栏目不是我们想要的位置，那么对它进行绝对定位，因为绝对定位的元素的位置相对于最近的已定位祖先元素。所以它外面的li设置一个相对定位。

 1 #navigator ul li  2             {  3                 float:left;  4                 position:relative;  5             }  6             <!--hover 不是hovor -->  7             #navigator ul li:hover ul  8             {  9                 display:block; 10                 position:absolute; 11                 left:0px; 12                 top:21px; 13             }

但是二级里面的字体显示也变了，变成了，竖向。

 1 <html>  2     <head>  3         <meta charset="UTF-8">  4         <title>首页  5         </title>  6         <!--别写成css/text -->  7         <style type="text/css">  8             #navigator ul  9             { 10                 list-style:none; 11             } 12             #navigator ul li ul 13             { 14                 display:none; 15             } 16             #navigator ul li 17             { 18                 float:left; 19                 position:relative; 20             } 21             <!--hover 不是hovor --> 22             #navigator ul li:hover ul 23             { 24                 display:block; 25                 position:absolute; 26                 left:0px; 27                 top:21px; 28             } 29             #navigator ul li ul li 30             { 31             <!-- 消除父元素浮动影响--> 32                 float:none; 33             } 34             .nav_ul_ul li 35             { 36             } 37             #navigator  38             { 39                  40             } 41         </style> 42     </head> 43     <body> 44      45     <div id = "navigator"> 46         <ul id="nav_ul"> 47             <li> 48                 <a href="#">首页</a> 49                 <ul class="nav_ul_ul"> 50                     <li>电信</li> 51                     <li>联通</li> 52                     <li>移动</li> 53                 </ul> 54             </li> 55             <li> 56                 <a href="#">电信</a> 57                 <ul class="nav_ul_ul"> 58                     <li>优惠1</li> 59                     <li>优惠2</li> 60                     <li>优惠3</li> 61                 </ul> 62             </li> 63             <li> 64                 <a href="#">移动</a> 65                 <ul class="nav_ul_ul"> 66                     <li>电信</li> 67                     <li>联通</li> 68                     <li>移动</li> 69                 </ul> 70             </li> 71             <li> 72                 <a href="#">联通</a> 73                 <ul class="nav_ul_ul"> 74                     <li>电信</li> 75                     <li>联通</li> 76                     <li>移动</li> 77                 </ul> 78             </li> 79         </ul> 80     </div> 81      82      83      84     </body> 85 </html>