如圖，制作導(dǎo)航條菜單一般是用一個div嵌套ul和li標(biāo)簽，然后li里面有a標(biāo)簽布局做好之后，開始寫導(dǎo)航條的樣式，如圖，先清除導(dǎo)航條的margin和padding然后定位導(dǎo)航條的div，這里我就用絕對定位來居中，如果你有其他導(dǎo)航條居中；純CSS的下拉菜單 支持IE6 IE7 Firefox margin0padding0 body background #ffffontfamily quotLucida Grandequot， Helvetica， Arial， sansseriffontsize 12px * 定義樣式的寬度和其他樣式 *。

floatleftpositionrelative錯誤的css表達，float與position沖突，建議去掉position，在ie6會出現(xiàn)兼容問題設(shè)置divmenu ul li平鋪而不是豎排，位置相對menu ul li ul display設(shè)置divmenu ul li；第一步編輯菜單的HTML代碼菜單包含三個列表項，分別取名為“Menu1”“Menu2”“Menu3”XMLHTML Code Menu1 Menu2 Menu3 第二步設(shè)置菜單的背景在該步驟中，把導(dǎo)航的背景設(shè)置為黑色。

你的nav里面設(shè)置了padding2em，2em，左右padding都是32px，而你的二級菜單li沒有設(shè)置width，默認的寬度是最小的，設(shè)置一下width80px，或者對于一級菜單二級菜單分別設(shè)置padding；所以“內(nèi)容”區(qū)域遮住了“導(dǎo)航欄”的下拉區(qū)域，只要將這兩個區(qū)域分別加zindex屬性，并且后面的值比前面的值小就行了另外，考慮到瀏覽器兼容性，下拉菜單不能用li的hover偽類來實現(xiàn)，需要配合js實現(xiàn)比較好。

css菜單欄彈出效果

1、如果想僅用CSS實現(xiàn)的話，可以考慮把菜單標(biāo)題和菜單內(nèi)容放到同一個容器下，然后給這個容器做hover樣式，具體請參閱下面示例代碼HTMLlt！DOCTYPE html PRODUCT MODULAR BROADLOOM RESILIENT RUBBER。

2、body margin0px padding0px li liststyleurl1jpg a displayblock alink，avisited textdecoration color#000000 men。

3、本人親測下面這些代碼是可以實現(xiàn)二級或多級導(dǎo)航菜單的 lt！ margin0pxpadding0px body overflowscrollfontsize12pxfontfamilyArial， Helvetica， sansserifcolor#000 a fontsize12pxfont。

4、CSS stylecssbody fontfamily quotLucida Sans Unicodequot， quotLucida Grandequot， sansseriful liststyletype margin 0 padding 0 overflow hidden backgroundcolor #。

5、還有一種原理，利用body的點擊事件來操作元素的，也是可以的，但是要利用到j(luò)s比較麻煩，下面的這個demo是只需要用到css就可以實現(xiàn)的 OnHereHelloWord 創(chuàng)建一個滾動菜單的HTML代碼是額按這題目來說，就是創(chuàng)建一個下拉菜單==。

html 菜單布局 css

1、如果要添加更多的菜單，只需要后邊繼續(xù)添加即可 特別提示 寫代碼過程中一定要記得換行，開頭留空，否則過后找東西，連你自己都不知道寫的是什么何談從哪里找起。

2、需要再加上JS進入控制具體代碼如下，JS的功能就是用來修改CSS中的display屬性下面的代碼只是做一些簡單的原理演示，你可以跟據(jù)你自己的需要進行修改lt！DOCTYPE HTML PUBLIC quotW3CDTD HTML 40 TransitionalENquot。

3、除了top_container和menu_container不變外，其余的替換成menu margin 0 autowidth 1002pxheight100% menu *padding0px margin0px menu ul floatleft menu li float leftliststyle。

4、就這個CSS邏輯，詳細代碼自己研究一下吧 重點核心的用法就是這個 ulmenu li uldisplay 一般時候都別顯示二級菜單 ulmenu lihover uldisplay block 滑鼠經(jīng)過時，就顯示二級菜單出來 主。