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; }