1首先輸入下方的代碼windowscrollfunction var $nav = $quotfloatingMenu ul liquot，length = $navlength1，獲取導(dǎo)航菜單 ul li 的個(gè)數(shù) item = new Array，新建一個(gè)數(shù)組 sTop = $window。

3在瀏覽器中打開頁面，可以看到已經(jīng)制作成了一個(gè)比較美觀的垂直導(dǎo)航欄4將鼠標(biāo)滑向垂直導(dǎo)航欄的列表項(xiàng)上，可以看到列表項(xiàng)顏色發(fā)生變化5也可以制作成水平導(dǎo)航欄，overflow hidden代碼的意思是超出高度和寬度的部分。

然后就需要在style標(biāo)簽中用CSS對(duì)導(dǎo)航條的樣式進(jìn)行定義了，如下圖所示，書寫樣式的時(shí)候一定要注意寫在style標(biāo)簽里面 最后運(yùn)行html頁面，你就會(huì)看到如下圖所示的導(dǎo)航條，當(dāng)鼠標(biāo)放在某個(gè)導(dǎo)航上時(shí)，背景色會(huì)變成紅色。

這是全部代碼，如果你會(huì)CSS的可以試著改一下就可以用了設(shè)置導(dǎo)航條的背景色 * 導(dǎo)航欄背景色* skinboxbd menulist linkbackground repeat scroll 0 0 #00ad08 * 導(dǎo)航列表背景色* skinbox。

urlnav_bgjpg0px0pxrepeatx如果你做的是自適應(yīng)屏幕的話，即沒有大容器包裹的情況，無需設(shè)置寬度，默認(rèn)就是width100%，也無需浮動(dòng)即CSS代碼#navbackgroundurlnav_bgjpg0px0pxrepeatxclearboth。

代碼如下 也就是我的網(wǎng)站的導(dǎo)航欄你可以去看看 ltSTYLE type=textcss ** body fontsize12px textaligncenter margintop30px fontfamilyVerdana div，imgmargin0。