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

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

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

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

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

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

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

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