復制代碼代碼如下: !DOCTYPE html html head title 導航欄 /title meta http-equiv="content-type" content="text/html; charset=UTF-8" link rel="stylesheet" type="text/css" href="css/navigator.css" /head body div ul li a href="#" AAAA /a ul li a href="#" A1 /a /li li a href="#" A2 /a /li li a href="#" A3 /a /li li a href="#" A4 /a /li li a href="#" A5 /a /li li a href="#" A6 /a /li /ul /li li a href="#" BBBB /a ul li a href="#" B1 /a /li li a href="#" B2 /a /li li a href="#" B3 /a /li li a href="#" B4 /a /li li a href="#" B5 /a /li li a href="#" B6 /a /li /ul /li li a href="#" CCCC /a ul li a href="#" C1 /a /li li a href="#" C2 /a /li li a href="#" C3 /a /li li a href="#" C4 /a /li li a href="#" C5 /a /li li a href="#" C6 /a /li /ul /li li a href="#" DDDD /a ul li a href="#" D1 /a /li li a href="#" D2 /a /li li a href="#" D3 /a /li li a href="#" D4 /a /li li a href="#" D5 /a /li li a href="#" D6 /a /li /ul /li li a href="#" EEEE /a ul li a href="#" E1 /a /li li a href="#" E2 /a /li li a href="#" E3 /a /li li a href="#" E4 /a /li li a href="#" E5 /a /li li a href="#" E6 /a /li /ul /li li a href="#" FFFF /a ul li a href="#" F1 /a /li li a href="#" F2 /a /li li a href="#" F3 /a /li li a href="#" F4 /a /li li a href="#" F5 /a /li li a href="#" F6 /a /li /ul /li li a href="#" GGGG /a ul li a href="#" G1 /a /li li a href="#" G2 /a /li li a href="#" G3 /a /li li a href="#" G4 /a /li li a href="#" G5 /a /li li a href="#" G6 /a /li /ul /li /ul /div /body /html
下面是css文件
復制代碼代碼如下: .navigator{/*當然，寬度可以你自己定義*/ width: 100%; margin: 0; } .navigator ul{/*這里必須設置內邊距和外邊距，因為瀏覽器會自動給ul設定值，會把導航欄擠歪*/ padding: 0; margin: 0; list-style-type: none; } .navigator li{/*本來ul是豎直排列的，對所有li元素進行float:left他就會自動全部靠左*/ float: left; position :relative; } .navigator ul li a,.navigator ul li a:visited {/*這里設置text-decoration是為了防止a標簽自己的樣式*/ display: block; text-align: center; text-decoration: none;/*不對文本設置效果 */ width: 184px;/*每一塊的寬度*/ height: 50px;/*每一塊的高度*/ color: black;/*文字顏色 */ border: 1px solid #fff;/*邊框大小和顏色 */ border-width: 1px 1px 0 0;/*四個邊框的寬度 ,注意，左右邊框沒有像素哦，仔細看導航欄左右有縫隙*/ background: #CCCCCC;/*背景顏色 */ line-height: 50px;/*這是一個技巧，這里將height和line-height設置為一樣的高度文字就會水平豎直居中 */ font-size: 17px; } .navigator ul li:hover a {/*這是一個css偽類，將鼠標移上去的時候字體和背景都會變色，移開又會變回來 */ color: #fff; background: #CCCCFF; } .navigator ul li ul {/*這里是為了將導航欄里的內容隱藏*/ display: none; } .navigator ul li:hover ul {/*這里就是彈出的下拉菜單了*/ display: block; position: absolute; top: 51px; left: 0; width: 185px; } .navigator ul li:hover ul li a {/*這里當然是定義下拉菜單里的a標簽了*/ display: block; background: #CCFFFF; color: #000; } .navigator ul li:hover ul li a:hover {/*這個是偽類，上面有說*/ background: #dfc184; color: #000; }
