很多小伙伴學(xué)習(xí)了一段時(shí)間的HTML和css，就想自己動(dòng)手試試制作導(dǎo)航條菜單，不過(guò)卻沒(méi)有思路，今天小編我就來(lái)分享一下HTML和css制作導(dǎo)航條的實(shí)例，大家可以參考參考如圖，制作導(dǎo)航條菜單一般是用一個(gè)div嵌套u(yù)l和li標(biāo)簽，然后li。

我做一個(gè)例子吧，ltdiv style=quotwidth200pxheight300pxborder1px red solidfloatleftquot 左邊內(nèi)容 ltdiv ltdiv style=quotwidth400pxheight300pxborder1px red solidfloatleftmarginleft4pxquot 右邊。

ltdiv這個(gè)是菜單欄的代碼，以下是CSS樣式#menu background #FFFFFF urlimagesimg01gif repeatx width 960px height 45px margin 0 auto padding 0px 0 fontsize16px#menu ul height 45px。

如果你這個(gè)二級(jí)菜單是什么標(biāo)簽做成的如果不是DIV或者其他的話(huà)，建議用區(qū)塊來(lái)做你沒(méi)有貼代碼，但據(jù)我的經(jīng)驗(yàn)來(lái)看，你導(dǎo)航應(yīng)該是直接插入的圖片，不是用的背景圖片，所以你的圖片會(huì)掉下來(lái)，因?yàn)閳D片本身為內(nèi)聯(lián)塊，會(huì)占用一。

為什么不要js的呢用js不是很簡(jiǎn)單嗎，又不會(huì)產(chǎn)生那么多需要兼容的問(wèn)題jquery水平二級(jí)導(dǎo)航欄實(shí)例atextdecoration outline cursorpointercolorwhiteul liststyle ul lifloat leftmargin。

css技巧分享如何用css制作橫向二級(jí)下拉菜單 工具材料記事本 瀏覽器 打開(kāi)Notepad，先輸入一個(gè)頁(yè)面框架好了，接下來(lái)就該定義頁(yè)面的標(biāo)題關(guān)鍵詞描述了content=。

框架好了，那么就該定義頁(yè)面的title，關(guān)鍵詞keyword，和描述description meta charset=#34UTF8#34 content=#34texthtml#34。

ltlilta href=quot#quot二級(jí)菜單_01ltaltli ltlilta href=quot#quot二級(jí)菜單_02ltaltli ltul lt！if lte IE 6lttdlttrlttableltalt！endif ltli ltul ltdiv ltbody。

樣式代碼改成這樣 ul， li margin 0px padding 0px ul liststyle a fontsize 12px color #000000 textdecoration navWrapper width 100px height 30px。

CSS就是樣式表 DIV就是層塊 大家常說(shuō)的CSS+DIV 是種現(xiàn)在比較流行的做網(wǎng)站的一種布局法 就是用CSS+DIV布局，一個(gè)網(wǎng)站由各個(gè)層組成，而不再用表格TABLE來(lái)布局 這樣做的效果1，代碼可更簡(jiǎn)潔 2，改版方便 3，搜索引擎比較。