這部分最後給出的成品效果比較驚人，也就是傳說中的純css六級選單。這個東西最厲害的地方是相容所有主流瀏覽器（ie6，ie8，maxthon2.5，firefox3.5，opera10，safari4與chrome2），而一點css hack也沒有用。畢竟css hack只是權宜之計，治標不治本，誰知它會對未來新版本的瀏覽器有什麼***，因此能不用就不要用了。由於結構非常有規律，讀者認真學習後，可以自行擴充套件為十級選單。
由於ie6能支援的偽類少得可憐，僅支援a元素的hover與visited與active。為了顯示隱藏的二級選單，我們必須把二級選單的那個無序列表放到a元素下，但這樣一來firefox那邊又發難了。這時我們就要請出ie的條件注釋，讓頁面在ie6下呈現一套結構層，在其他瀏覽器下呈現另一套。
選單二二
//************略***********
//************略***********
選單二
選單三
選單四
執行**
但是這樣做不能使ie6的二級選單彈出來，這情形我在純css相簿遇到許多次。查一下國外的資料，說是ie用hover切換絕對定位子元素時存在問題，但具體情形又分許多種，解法也不一。但針對多級選單的這種多層子元素，最常用的方法是把它們套在table中，這相當於table布局。因為table的容錯能力是最強的，這多得人們一直用它來布局，於是瀏覽器一直在增強它在這方面的優勢。感謝table，我們終於收拾ie6這個怪胎了。
選單二//*************略**************
//*************略**************
選單二
選單三
選單四
執行**
但這樣一來對firefox等瀏覽器新增了許多多餘的結構層**，它們基本不需要table這東西就能運作良好。因此，我們把table整到ie條件注釋中。如：
//*************略************
//*************略************
//*************略************
選單二
選單三
選單四
執行**
然而，這結構層還能進一步精簡。同時我們應該留意到ie6水平選單的異常高度，這是ie6的li元素在包含塊級顯示元素時會多出5px空隙。由於li元素包含的結構比較複雜，以前用對付img元素的幾種方法行不通了。我們可以顯式設定a元素的高度，讓多餘的部分隱藏掉就是。這就唯一不用css hack的方法。
更精簡的結構層：
//***********略*********
//***********略*********
//***********略*********
.menu a選單二選單三
選單四
執行**
基於上面的結構我們就可以開發多級子選單了。
純css多級選單by 司徒正美
二級選單_12
**選單_22
**選單_23
**選單_24
選單二選單三
選單四
執行**
這時我們又發現在ie6下，當我們的滑鼠移到二級選單的上面時，一級選單項會出現乙個邊框，顏色為hover時的背景色。在ie6，table與單元格之間(cellspacing)，單元格與單元格的內容之間(cellspadding)是存在空隙，背景色為transparent，也就是說永遠顯示下一層的背景色。由於我們設定a的display:block，它會佔滿td的所有空間，因此那個神秘的邊框應該是cellspacing。我們可以用以下的方式證實我的猜想。
.menu table
.menu table td
二級選單_12
**選單_22
**選單_23
**選單_24
選單二選單三
選單四
執行**
知道問題的所在，我們就可以對症下藥了。解決方法有二。一是設定cellspacing等於零。由於cellspacing為dom屬性，非css屬性，換言之，有多少個table我們就要寫多少次。二是設定border-collapse 為collapse，因為這樣會把table與它裡面的td的border合而為一，這樣它們之間的空隙也不復存在。我們當然選擇第二種啦。
.menu table這是六級選單，只要頁面夠長，十級也能弄出來！
五級選單_11
五級選單_11
五級選單_12
**選單_12
**選單_13
**選單_14
二級選單_12
**選單_22
**選單_23
**選單_24
選單二
選單三選單四
二級選單_42
執行**
最後總結一下：
純CSS多級選單2
這部分最後給出的成品效果比較驚人，也就是傳說中的純css六級選單。這個東西最厲害的地方是相容所有主流瀏覽器 ie6，ie8，maxthon2.5，firefox3.5，opera10，safari4與chrome2 而一點css hack也沒有用。畢竟css hack只是權宜之計，治標不治本，誰知它...
純CSS多級選單
這是乙個相當炫的功能，讓網頁看起來像桌面程式，如window的開始選單。實現原理基本和純css相簿差不多，但要注意的事項比較多，讓我們一步步來吧。先來乙個非常簡單的一級選單與懸停效果。結構很熟悉吧，就是把原來放的地方換成文字而已。我還特意標出來了。接著下來的表現層 非常簡單。menu menu li...
python 多級選單 python多級選單
該樓層疑似違規已被系統摺疊 隱藏此樓檢視此樓 dic china 直轄市 北京市 東城區 西城區 崇文區 宣武區 朝陽區 海淀區 豐台區 石景山區 門頭溝區 房山區 通州區 順義區 昌平區 大興區 懷柔區 平谷區 延慶縣 密雲縣 省 浙江省 杭州市 拱墅區 上城區 下城區 江乾區 西湖區 濱江區 蕭...