1：html**
下級
下級下級
無限級無限級
無限級無限級
無限級無限級
下級當checkbox的擁有checked值的時候就就讓ol現實出來，達到我們想要的功能。
接下來看看css**吧：
li input
input + ol
input + ol > li
li label
input:checked + ol
input:checked + ol > li
input:checked + ol
這個是講當inoput 擁有了checked後它平級的ol擁有的樣式。
檢視demo
使用ie9以下瀏覽就不用看了，請使用非ie瀏覽器。
（想讓ie6+瀏覽器支援也是可以滴，但是需要加js來模擬css3屬性。國外有很多牛人都寫了讓ie6+瀏覽器支援部分css3的js，例如pie）
總結：
總體來說，實現思路很簡單，主要是利用css3的 checked 偽類來實現ol的隱藏顯示。不過遺憾的是ie遊覽器不支援css3，但我們不能因為ie的不支援而放棄對css3的研究。在國外css3和html5都是前端很熱門的話題，他們研究的東西遠遠超過我們，但國內真正去嘗試的還是不多，對於乙個前端開發人員來說是一件很可悲的事。我認為css3應該引起我們的重視，不能讓我們輸在起跑線。讓我們大家一起來推動css3的發展吧。
2：例項源**
水產養殖
實時資料
實時資料
下級 下級
下級 下級
無限級 無限級
無限級無限級
無限級無限級
下級下級
下級下級
水產養殖
實時資料
實時資料
下級 下級
下級下級
下級下級
純CSS製作的響應式摺疊選單分享
這個選單能居左 居中和居右對齊，不像之前文章提到的選單需要靠點選在顯示和隱藏之間進行切換。它也有乙個標記顯示啟用 當前選單項，並且它能作用在所有移動平台和包括ie在內的所有桌面瀏覽器。首先，看看demo的效果 demo 一 目的 本教程的目的是展示如何將規律的列表選單變成乙個較小的顯示下拉列表。這個...
純CSS多級選單
這是乙個相當炫的功能，讓網頁看起來像桌面程式，如window的開始選單。實現原理基本和純css相簿差不多，但要注意的事項比較多，讓我們一步步來吧。先來乙個非常簡單的一級選單與懸停效果。結構很熟悉吧，就是把原來放的地方換成文字而已。我還特意標出來了。接著下來的表現層 非常簡單。menu menu li...
純CSS打造Flow Steps導航
幾個要點 1.三角箭頭效果是用border實現的,詳細的可以google下css 三角 2.ie6下不支援border color transparent 透明 解決方法是先將其設定為乙個不常用的顏色,然後再用ie的濾鏡將其透明化 demo中有注釋 3.每個step之間的白色間隙為了等距所以處理比較...