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

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

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

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

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

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

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

ltlilta href=quot#quot二級菜單_01ltaltli ltlilta href=quot#quot二級菜單_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就是層塊 大家常說的CSS+DIV 是種現(xiàn)在比較流行的做網(wǎng)站的一種布局法 就是用CSS+DIV布局，一個網(wǎng)站由各個層組成，而不再用表格TABLE來布局 這樣做的效果1，代碼可更簡潔 2，改版方便 3，搜索引擎比較。