css垂直樹形下拉列表
翻譯：linyupark / 2006-04-29
讓我們看下效果是怎樣的吧:css與簡單js製作出的選單
首先建立選單架構非常重要,最好的方法是使用ul來建立各選單內容的從主關係.很複雜麼?其實只要一路寫下去就ok了:
services
contact us
上面所寫的**直接在瀏覽器下可以說非常的難看...所以我們先給他們加上點樣式,不至於因為外表的問題弄的你沒有興趣繼續做下去,呵呵
首先我們把煩人的點點去掉,並定義這個選單的寬度:
ul 接下來,我們要定義裡面內容部分,非常幸運,列表預設的排列就是垂直的,這與我們的要求相一致,定位方式我們應該設定為相對定位(relative)因為副選單要在相對的位置上進行絕對定位:
ul li
現在我們定義的就是副選單的內容部分,使用left和top屬性我們就可以讓它們顯示在主選單內容的右邊.display屬性值為none所以在預設情況下是隱藏的:
li ul
最後得修飾下裡面的a元素:
ul li a
但因為ie的顯示bug,所以得加上下面這段話進行修復:
/* fix ie. hide from ie mac /*/
* html ul li
* html ul li a
/* end */
我們需要在我們移動到主選單上時顯示副選單內容:
li:hover ul
好了,你可以測試下**了,1%人可能會興奮地叫起來,呵呵遺憾的是就目前這些**還不能夠在ie上運做作出我們想要的結果.要讓ie運作出一樣的效果,我們得使用一段js**,不會非常的煩瑣:
startlist = function() }}
}}
window.οnlοad=startlist;
好了,其他**再做下補充,這個功能就能實現了:
li:hover ul, li.over ul
該文作者補充的作品
CSS下拉列表
谷歌效果圖 ie效果圖 凱明科技 div div class dropdown content a href 凱明科技資訊 1凱明科技資訊 1 a a href 凱明科技資訊 2 a a href 凱明科技資訊 3 a div div div class dropdown div class dro...
CSS下拉列表
例子 下拉列表 選單內容 1 選單內容 2 選單內容 3 html 部分 製作下拉列表可以使用任何的 html元素來開啟下拉列表，如 或 元素。使用容器元素 如 來建立下拉列表的內容，並放在任何你想放的位置上。使用 元素來包裹這些元素，並使用 css 來設定下拉內容的樣式。css 部分 dropdo...
CSS 下拉列表
使用 css 建立乙個滑鼠移動上去後顯示下拉列表的效果。當滑鼠移動到指定元素上時，會出現下拉列表。dropdown dropdown content.dropdown hover.dropdown content style mycode3 mycode3type html 滑鼠移動到我這！span...