PHP開(kāi)發(fā) 導(dǎo)覽列二級(jí)下拉式選單CSS樣式
我們上一章已經(jīng)把我們對(duì)應(yīng)的HTML元素加上了class選擇器,現(xiàn)在我們把這些class加上我們的css樣式,程式碼如下
<style> li{ list-style-type:none; } #menu { width:950px; margin:30px auto 0px; height:45px; background-color: #030e11; } #menu li { float:left; width:109px; line-height:39px; text-align:center; position:relative; border:none; } #menu li a { font-size:16px; color: #e6f8e9; display:block; outline:0; text-decoration:none; } #menu li:hover a { color: #ff0000; /*導(dǎo)航欄文字顏色 */ } #menu li:hover .dropdown_1column { left:0px; top:38px; } .dropdown_1column{ /* 下拉菜單邊框顏色*/ margin:0px auto; float:left; position:absolute; left:-999em; text-align:left; border:1px solid #066591; border-top:none; background:#F4F4F4; width: 140px; } #menu li:hover div a { /* 下拉菜單文字顏色*/ font-size:12px ;color:#444; } #menu li:hover div a:hover{color:#21910e;} /*下拉菜單鼠標(biāo)停留顏色*/ #menu li ul { list-style:none;padding:10px 5px; margin:0; } #menu li ul li { font-size:12px; line-height:26px; position:relative; padding:0;margin:0; float:none; text-align:left; width:130px; } #menu li ul li:hover { background:none; border:none;padding:0; margin:0; } </style>
我們只需要將這些css樣式加到頁(yè)面中就可以實(shí)現(xiàn)我們想要的效果了
你可以把這些css樣式單獨(dú)放到css檔案中,再在HTML頁(yè)面中引用一下即可
#也可把它直接放到HTML頁(yè)面'head'裡面,本教學(xué)是放在了同一個(gè)頁(yè)面
看下一章完整程式碼