使用js和css實現(xiàn)網(wǎng)頁導(dǎo)航欄的下拉菜單

《使用js和css實現(xiàn)網(wǎng)頁導(dǎo)航欄的下拉菜單》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在應(yīng)用文檔-天天文庫。

1、body{font-family:verdana,sans-serif;}#navigation{margin:20px;list-style-type:none;/*項目符號無*/}#navigationliul{list-style-type:none;display:none;/*子表初始時不顯示*/position:absolute;/*絕對定位，他是參照瀏覽器

2、的左上角，默認相對父元素絕對定位，絕對定位元素自然的層疊于文本流之上*/top:40px;/*距父元素位置的高度*/left:0;/*距父元素的左距*/margin-left:0px;/*子表的外邊距為0，是子表與父表對齊*/padding-left:0px;/*子表的外表距為0，是子表與父表對齊*/margin-top:1px;width:150px;/*子表的寬度*/}#navigationli{text-align:center;float:left;/*表項自左向右排序*/position:relative;/*

3、參照父級的原始點為原始點進行相對定位；對象不可層疊、不脫離文檔流*/}#navigationlia:link,#navigationlia:visited{display:block;text-decoration:none;/*文本強調(diào)，無下劃線*/background:#5577ee;color:#FFFFFF;width:150px;height:40px;line-height:40px;/*行高*/border:1pxsolid#fff;/*邊框*/border-width:1px1px00;}#navigat

4、ionlia:hover{color:#ffffff;background:#dd3300;}#navigationliullia:hover{color:#ffffff;background:#00dd33;}functionShowSubMenu(li){varsubMenu=li.getElementsByTagName("ul")[0];subMenu.style.display="block";}functionHideSubMenu(

5、li){varsubMenu=li.getElementsByTagName("ul")[0];subMenu.style.display="none";}