一.問題描述
做一個類似校園網首頁，主要是導航欄的設置，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 }
不過由於，div是用的id，二級ul也變成橫向了。
查了資料我感覺可以這樣寫，果然對了。
1 #navigator ul li 2 { 3 float:left; 4 } 5 #navigator ul li ul li 6 { 7 float:none;
三.細節處理
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>
先不管了，這有個比較精美的。
下載地址http://download.csdn.net/detail/huoxingshiyilang/8678959
特別說明：上面這個鏈接的資料是最下面的精美導航的代碼，親測兼容IE和谷歌。