純css怎么實現(xiàn)的下拉導(dǎo)航欄附html結(jié)構(gòu)及css樣式

         
 
 AAAA 
 
A1
 
A2
 
A3
 
A4
 
A5
 
A6
 
 
 
 BBBB 
 
B1
 
B2
 
B3
 
B4
 
B5
 
B6
 
 
 
 CCCC 
 
C1
 
C2
 
C3
 
C4
 
C5
 
C6
 
 
 
 DDDD 
 
D1
 
D2
 
D3
 
D4
 
D5
 
D6
 
 
 
 EEEE 
 
E1
 
E2
 
E3
 
E4
 
E5
 
E6
 
 
 
 FFFF 
 
F1
 
F2
 
F3
 
F4
 
F5
 
F6
 
 
 
 GGGG 
 
G1
 
G2
 
G3
 
G4
 
G5
 
G6
 
 
 
 

下面是css文件

代碼如下:

.navigator{/*當(dāng)然，寬度可以你自己定義*/ 
width: 100%; 
margin: 0; 
} 
.navigator ul{/*這里必須設(shè)置內(nèi)邊距和外邊距，因為瀏覽器會自動給ul設(shè)定值，會把導(dǎo)航欄擠歪*/ 
padding: 0; 
margin: 0; 
list-style-type: none; 
} 
.navigator li{/*本來ul是豎直排列的，對所有l(wèi)i元素進(jìn)行float:left他就會自動全部靠左*/ 
float: left; 
position :relative; 
} 
.navigator ul li a,.navigator ul li a:visited {/*這里設(shè)置text-decoration是為了防止a標(biāo)簽自己的樣式*/ 
display: block; 
text-align: center; 
text-decoration: none;/*不對文本設(shè)置效果 */ 
width: 184px;/*每一塊的寬度*/ 
height: 50px;/*每一塊的高度*/ 
color: black;/*文字顏色 */ 
border: 1px solid #fff;/*邊框大小和顏色 */ 
border-width: 1px 1px 0 0;/*四個邊框的寬度 ,注意，左右邊框沒有像素哦，仔細(xì)看導(dǎo)航欄左右有縫隙*/ 
background: #CCCCCC;/*背景顏色 */ 
line-height: 50px;/*這是一個技巧，這里將height和line-height設(shè)置為一樣的高度文字就會水平豎直居中 */ 
font-size: 17px; 
} 
.navigator ul li:hover a {/*這是一個css偽類，將鼠標(biāo)移上去的時候字體和背景都會變色，移開又會變回來 */ 
color: #fff; 
background: #CCCCFF; 
} 
.navigator ul li ul {/*這里是為了將導(dǎo)航欄里的內(nèi)容隱藏*/ 
display: none; 
} 
.navigator ul li:hover ul {/*這里就是彈出的下拉菜單了*/ 
display: block; 
position: absolute; 
top: 51px; 
left: 0; 
width: 185px; 
} 
.navigator ul li:hover ul li a {/*這里當(dāng)然是定義下拉菜單里的a標(biāo)簽了*/ 
display: block; 
background: #CCFFFF; 
color: #000; 
} 
.navigator ul li:hover ul li a:hover {/*這個是偽類，上面有說*/ 
background: #dfc184; 
color: #000; 
}

把css文件和html文件放在一個目錄下就可以看了，有不妥的地方還請指正

到此，相信大家對“純css怎么實現(xiàn)的下拉導(dǎo)航欄附html結(jié)構(gòu)及css樣式”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！