本人菜鸟，写这个一方面是为了自己以后也能复习，另一方面也许能帮助一些需要的朋友……大神请忽视我！
昨天闲着无聊，想着用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>
效果图：
大概就是这样子了，不要在意颜色~~