css三級下拉的導覽列

標籤：pos   enter   對齊   頭部   over   樣式設定   三級   float   導航   

#menu{
height: 65px;
width:100%;
background-color: rgba(0, 0, 0, 0.5);
}
#menu ul{
list-style: none;
}
#menu ul li{
float: left;
position: relative;/*如果這裡不設定為relative的話，顯示的下拉是水平的*/
}
#menu ul li a {/*最頭部的導航連結的樣式設定*/
text-align: center;
border-right:1px solid #e9e9e9;
padding:20px;
display:block;
text-decoration:none;
color:white;
}
#menu ul li ul {
display: none;

}
#menu ul li:hover ul {
display: block;
position: absolute;
}
#menu ul li:hover ul li a {/*第二列的導航連結的樣式設定*/
display:block;
background:#12aeef;
color:#ffffff;
width: 50px;
text-align: center;
border-bottom: 1px solid #f2f2f2;
border-right: none;
}
#menu ul li:hover ul li a:hover {
background:#6dc7ec;
color:#fff;
}

/*三級下拉框*/
#menu ul li:hover ul li ul{
display: none;
}
#menu ul li:hover ul li:hover ul{
display: block;
position: absolute;
top:0;/*這裡使三級下拉框與二級下拉框對齊*/
left: 51px;/*這裡是是三級下拉框的左邊剛好在二級下拉框的右邊一點*/
}
#menu ul li:hover ul li:hover ul li a{
display:block;
background:#12aeef;
color:#ffffff;
width: 50px;
text-align: center;
border-bottom: 1px solid #f2f2f2;
border-right: none;
}
#menu ul li:hover ul li:hover ul li a:hover{
background:#6dc7ec;
color:#fff;
}

css三級下拉的導覽列