本人菜鳥，寫這個一方面是為了自己以后也能復習，另一方面也許能幫助一些需要的朋友……大神請忽視我！
昨天閑着無聊，想着用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>
效果圖：
大概就是這樣子了，不要在意顏色~~