Return to Snippet

Revision: 32552
at September 28, 2010 23:34 by czterystaczwarty


Initial Code
/* 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;
    
}

Initial URL


Initial Description
container id: nav
list class: dropdown-menu

Initial Title
Multilevel dropdown menu in puer CSS

Initial Tags
dropdown

Initial Language
CSS