篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS puer CSS中的多级下拉菜单相关的知识,希望对你有一定的参考价值。
/* DROPDOWN MENU */
/* !! dont insert fonts and colors here */
.dropdown-menu li{
float: left;
position: relative;
}
/* 2 level */
.dropdown-menu li ul{
display: none;
position: absolute;
top: 30px; /* height of first level bar */
left: 0px;
}
.dropdown-menu li ul li{
float: none;
}
.dropdown-menu li ul li ul{
left: 120px; /* width 2+ level */
top: 0;
}
.dropdown-menu li:hover ul {/*show 2+ level*/
display: block;
}
.dropdown-menu li:hover ul li ul{/*hide 3+ level*/
display: none;
}
.dropdown-menu li ul li:hover ul{
display: block;
}
.dropdown-menu li ul li:hover ul li ul{
display: none;
}
.dropdown-menu li ul li ul li:hover ul{
display: block;
}
.dropdown-menu li ul li ul li:hover ul li ul{
display: none;
}
/* DROPDOWN MENU - end */
/* view - like u wish */
#nav{
width: 950px;
height: 30px;
margin: 0 auto;
background: #ccc;
}
#nav ul li{
line-height: 30px;
height: 30px;
}
#nav ul ul{
background: #bbb;
}
#nav ul ul ul{
background: #aaa;
}
#nav ul ul ul ul{
background: #999;
}
#nav ul li ul li{
width: 120px;
}