Vertical Menu
- CSS driven vertical menu that has unlimited sub-menus;
- Sub-menus fly out to the right;
- Options for sub-menu alignment: middle (as demo1) or top (as demo2);
- Supported by IE 9+ and all other major browsers;
- Free to use and abuse.
The source code below syncs with the choosen demo:
CSS
CSS Customization
ul#menu-v, #menu-v ul
{
width:200px; /* Main Menu width */
border:1px solid rgba(190,190,190,0.3);
list-style:none; margin:0; padding:0;
z-index:9;
}
#menu-v li
{
margin:0;padding:0;
position:relative;
background-color:#DDDDDD; /*fallback color*/
background-color:rgba(0,0,0,0.5);
transition:background 0.5s;
}
#menu-v li:hover
{
background-color:rgba(0,0,0,0.9);
}
#menu-v a
{
font:normal 12px Arial;
border-top:1px solid rgba(190,190,190,0.3);
display:block;
color:#EEEEEE;
text-decoration:none;
line-height:30px;
padding-left:22px;
position:relative;
}
#menu-v li:first-child a
{
border-top:0;
}
#menu-v a.arrow::after{
content:'';
position:absolute;
display:inline;
top:50%;
margin-top:-4px;
right:8px;
border-width:4px;
border-style:solid;
border-color:transparent transparent transparent white;
transition:border-color 0.5s;
}
#menu-v li a.arrow:hover::after
{
border-color:transparent transparent transparent #CCCCCC;
}
/*Sub level menu items
---------------------------------------*/
#menu-v li ul
{
min-width:180px; /* Sub level menu min width */
position:absolute;
display:none;
left:100%;
top:50%; transform:translateY(-50%);
}
#menu-v li:hover > ul
{
display:block;
}
HTML