纯手工 css+html 简易三级导航栏（横向）

本人菜鸟，写这个一方面是为了自己以后也能复习，另一方面也许能帮助一些需要的朋友……大神请忽视我！

昨天闲着无聊，想着用css+html做一个横向的导航栏。。。。。其实之前也尝试过，可是总是失败或者说二级导航栏不能按自己想要的位置摆放，现在终于有点明白了——就是position这个家伙捣的鬼！

要想二级菜单放在一级菜单下面，有几点需要注意：

　①：一级菜单的li中要设置position:relative;这相当于给二级菜单设置一个定位参考物；

　②：二级菜单中的ul要设置position:absolute;（这样设置之后，left,top之类的属性才起中作用），然后根据设置left(距离一级菜单的左边框距离)，top(距离一级菜单的上边框)就可以搞定了！

下面直接看一下代码吧；

html:

 1 <div class="menu">
 2     <ul>
 3         <li>导航1
 4             <ul>
 5                 <li>分导航1
 6                     <ul>
 7                         <li>又导航1</li>
 8                         <li>又导航1</li>
 9                         <li>又导航1</li>
10                     </ul>
11                 </li>
12                 <li>分导航2
13                     <ul>
14                         <li>又导航1</li>
15                         <li>又导航1</li>
16                         <li>又导航1</li>
17                     </ul>
18                 </li>
19                 <li>分导航3</li>
20                 <li>分导航4</li>
21             </ul>
22         </li>
23         <li>导航2
24             <ul>
25                 <li>分导航1</li>
26                 <li>分导航2</li>
27                 <li>分导航3</li>
28                 <li>分导航4</li>
29             </ul>
30         </li>
31         <li>导航3
32             <ul>
33                 <li>分导航1</li>
34                 <li>分导航2</li>
35                 <li>分导航3</li>
36                 <li>分导航4</li>
37             </ul>
38         </li>
39         <li>导航4
40             <ul>
41                 <li>分导航1</li>
42                 <li>分导航2</li>
43                 <li>分导航3</li>
44                 <li>分导航4</li>
45             </ul>
46         </li>
47         <li>导航5
48             <ul>
49                 <li>分导航1</li>
50                 <li>分导航2</li>
51                 <li>分导航3</li>
52                 <li>分导航4</li>
53             </ul>
54         </li>
55     </ul>
56 </div>

CSS代码：

 1 <style type="text/css">
 2 .menu{
 3 margin:0px;
 4 padding::0px;}
 5 .menu ul{
 6 margin:0px;
 7 padding:0px;
 8 width:50%;
 9 height:30px;
10 background-color:#000099;
11 color:#FFFFFF;
12 text-align:center;
13 list-style:none;
14 font-family:"宋体";}
15 .menu ul li{
16 position:relative;
17 margin-left:0px;
18 padding-top:10px;
19 padding-left:0px;
20 height:20px;
21 width:20%;
22 border:none;
23 float:left}
24 .menu ul li ul{
25 visibility:hidden;
26 width:80%;
27 position:absolute;
28 top:30px;
29 left:10%;}
30 .menu ul li ul li{
31 width:100%;
32 float:none;
33 height:25px;
34 padding-top:3px;
35 padding-bottom::3px;
36 position:relative;
37 }
38 .menu ul li ul li ul{
39 visibility:hidden;
40 position:absolute;
41 left:100%;
42 top:0px;
43 width:80%;
44 }
45 .menu ul li:hover ul li ul{
46 visibility:hidden;}
47 .menu ul li ul li:hover ul{
48 visibility:visible;
49 background-color:#CC3399;
50 color:#000000;
51 }
52 .menu ul li ul li:hover ul li{
53 background-color:#CC3399;
54 color:#000000;
55 }
56 .menu ul li:hover{
57 background-color:#999999;}
58 .menu ul li:hover ul{
59 visibility:visible;}
60 .menu ul li:hover ul li{
61 background-color:#CCFF99;
62 color:#000000;}
63 </style>

效果图：

大概就是这样子了，不要在意颜色~~