這次的XHTML部分的代碼橫向代碼略有不同，我們沒有繼續(xù)使用ul和li標(biāo)簽，其實繼續(xù)使用ul元素也能完好的實現(xiàn)縱向?qū)Ш较到y(tǒng)，但是在這風(fēng)景點我們希望更多的提供不同途徑來展現(xiàn)css而已設(shè)計的靈活與方便性以便于拋磚引玉，開拓更多的；樣式代碼改成這樣 ul， li margin 0px padding 0px ul liststyle a fontsize 12px color #000000 textdecoration navWrapper width 100px height 30px。

打開Notepad，先輸入一個頁面框架好了，接下來就該定義頁面的標(biāo)題關(guān)鍵詞描述了content=；1編寫帶有div導(dǎo)航的html代碼2使用class=“nav”屬性的‘div’標(biāo)簽作為菜單的容器在截圖中，在圖示的HTML代碼中，一個簡單的無序列表ul來表示主菜單項3在主菜單區(qū)域中添加鏈接在本步驟中，在無序列表。

首先需要打開自己電腦上的DW軟件，新建一個html頁面，然后將其保存在桌面上接下來我們需要在body里面添加DIV標(biāo)簽，并在其內(nèi)使用ul無序列表和li標(biāo)簽制作一個一級菜單欄，代碼和瀏覽器的效果如下面兩張圖片所示因為菜單欄；請看如下調(diào)用jquery的j顯示子菜單的代碼quot#menu_2quothoverfunction quotsub_menu_2quotshow，function *這里就是out事件* quotsub_menu_2quothide剩下的就是樣式的問題了。

先在網(wǎng)站的head模板添加二級菜單的html代碼，如下 添加之后前臺就可以顯示二級菜單，但會出現(xiàn)亂碼，然后找到相應(yīng)的css文件，在*nav*部分，加入以下代碼，具體風(fēng)格可以自己改，navulliulpositionabsolutedisplay；一二級菜單不下來原因有以下方面1HTML代碼各層級嵌套錯誤2CSS樣式控制中沒有使用定位屬性3定位數(shù)值計算錯誤二正確的解決方案 1清晰的HTML代碼層級，如下ltul class=quotmenuquot ltli class=quotnavquot。

如何使用css布局水平導(dǎo)航欄 如果是導(dǎo)航菜單，可以用ul不必要列表制作同時在CSS中使用floatleft控制李向左浮動實現(xiàn)水平菜單請注意，UL或UL的父容器的寬度必須大于所有l(wèi)i寬度的總和例如 html怎么把一行圖片變兩行橫向排列。

給你個例子 lttitlediv css3 側(cè)邊菜單導(dǎo)航欄titleltstyle type=quottextcssquot*margin0padding0liststyletypea，imgborder0bodyfont12px180% Arial， Helvetica， sansserif；選擇鼠標(biāo)指針浮動在其上的元素，并設(shè)置其樣式ahover backgroundcoloryellow 對于HTML 部分可以使用任何的 HTML 元素來打開下拉菜單，如ltspan， 或 a ltbutton 元素使用容器元素 如 ltdiv 來創(chuàng)建。

方法如下方法一HTML 1創(chuàng)建CSS菜單的HTML代碼框架我們使用class=“nav”屬性的‘div’標(biāo)簽作為菜單的容器在截圖中，在圖示的HTML代碼中，一個簡單的無序列表ul來表示主菜單項2在主菜單區(qū)域中添加鏈接在；最好是用JS做，但是非要用CSS呢，也可以如下是我以前寫的一個CSS下拉，你可以參考一下lthtmlltheadlttitlelttitleltstyle*margin0padding0ul，liliststyletypepadding0margin0#nav li。

如圖，制作導(dǎo)航條菜單一般是用一個div嵌套ul和li標(biāo)簽，然后li里面有a標(biāo)簽布局做好之后，開始寫導(dǎo)航條的樣式，如圖，先清除導(dǎo)航條的margin和padding然后定位導(dǎo)航條的div，這里我就用絕對定位來居中，如果你有其他導(dǎo)航條居中；ltstylebody background#ffful，li margin0padding0liststyleh3 textaligncenter#nav fontsize12pxcolor#999#nav ul li heightautopadding4px 0textaligncenter。