Demo of Vertical Menu

Vertical Menu

 

The source code below syncs with the choosen demo:

 

CSS

CSS Customization

Main Menu Width:
Sub-Menu Min Width:
Sub-menu alignment-Y:
middle top
Height of Each Item:
Bg Color:
Bg Color Hovered:
Text Color:
Border Color:
Arrow Color:
Arrow Color Hovered:
 
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


 

Your Name
+ =  

Question Title

If your question is about troubleshooting, please first go through the checking list in Troubleshooting Request.