CodeHQ

CSS dropdown menu

div#navigation{
    background: #444444; /* Old browsers */
    border-radius: 4px;
}
#navigation ul, #navigation li{ list-style:none; padding:0; margin:0; display:inline; }
#navigation ul li{ float:left; position:relative; }
#navigation ul li a{
    display:block;
    padding:8px 12px;
    margin:1px;
    font-size:18px;
    white-space:nowrap;
    border-radius:3px;
}
#navigation ul li a:hover{ background:#222;}
#navigation ul ul{
    position:absolute;
    top:-99999px;
    left:0;
    opacity: 0; /* Hide sub level */
    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    z-index:497;
    background:#333;
    padding: 2px;
    border:1px solid #444;
    border-top:none;
    box-shadow:#111 0 3px 4px;
    border-bottom-left-radius:6px;
    border-bottom-right-radius:6px;
}
#navigation ul ul ul {
    position:absolute;
    top:-99999px;
    left:100%;
    opacity: 0;
    -webkit-transition: opacity .5s ease-in-out; /* Hide sub levels */
    -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    border-radius:6px;
    border:1px solid #444;
}
#navigation ul li:hover>ul{ opacity: 1; position:absolute; top:99%; left:0; }
#navigation ul ul li:hover>ul{ position:absolute; top:0; left:100%; opacity: 1; z-index:497; background:#333; }