Menu Vertical Hide
by kompiajaib
HTML
<div id="menu-vertical">
<h3 id="menu-label"><a href="#">Menu</a></h3>
<div class='vertical'>
<ul>
<li><a href='/' title='Menu1'>Menu 1</a>
<ul>
<li><a href='/' title='Sub Menu1'>Sub1 Menu1</a></li>
<li><a href='/' title='Sub Menu1'>Sub2 Menu1</a></li>
<li><a href='/' title='Sub Menu1'>Sub3 Menu1</a></li>
<li><a href='/' title='Sub Menu1'>Sub4 Menu1</a></li>
<li><a href='/' title='Sub Menu1'>Sub5 Menu1</a></li>
<li><a href='/' title='Sub Menu1'>Sub6 Menu1</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href='/' title='Menu2'>Menu 2</a>
<ul>
<li><a href='/' title='Sub1 Menu2'>Sub1 Menu2</a></li>
<li><a href='/' title='Sub2 Menu2'>Sub2 Menu2</a></li>
<li><a href='/' title='Sub3 Menu2'>Sub3 Menu2</a></li>
<li><a href='/' title='Sub4 Menu2'>Sub4 Menu2</a></li>
<li><a href='/' title='Sub5 Menu2'>Sub5 Menu2</a></li>
<li><a href='/' title='Sub6 Menu2'>Sub6 Menu2</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href='/' title='Menu3'>Menu 3</a>
<ul>
<li><a href='/' title='Sub1 Menu3'>Sub1 Menu3</a></li>
<li><a href='/' title='Sub2 Menu3'>Sub2 Menu3</a></li>
<li><a href='/' title='Sub3 Menu3'>Sub3 Menu3</a></li>
<li><a href='/' title='Sub4 Menu3'>Sub4 Menu3</a></li>
<li><a href='/' title='Sub5 Menu3'>Sub5 Menu3</a></li>
<li><a href='/' title='Sub6 Menu3'>Sub6 Menu3</a></li>
</ul>
</li>
</ul>
</div>
</div>CSS
#menu-vertical{width:19em;right:-19em;top:5.5em;height:auto;position:fixed;overflow-y:hidden;background-color:#2b2b2b;transition:right .4s ease-in-out;margin:0;padding:0}
#menu-vertical:hover{right:0;}
#menu-label{display:inline-block;background:#292929;position:fixed;text-align:center;right:0;top:3.2em;z-index:100;font-size:14px;line-height:30px;}
#menu-label a{color:#FFF;display:block;text-transform:uppercase;text-decoration:none;width:5.1em;}
#menu-label:hover{opacity:0.67;}
.vertical { font-size:13px; line-height:30px; font-weight:700; border:1px solid #1d1d1d; border-radius:1px; }
.vertical>ul { margin:0; padding:0; }
.vertical ul,.vertical li { list-style:none; }
.vertical>ul>li { background:#292929; margin:0;text-transform:uppercase;padding:0;color:#fff;}
.vertical>ul>li:hover {background:#4B4B4B}
.vertical>ul>li a{color:#fff}
.vertical>ul>li ul { transition:.3s ease-out; opacity:0; margin:0; padding:0; }
.vertical>ul>li li { background:#efefef;}
.vertical>ul>li li a{color:#333;text-transform:none}
.vertical a { display:block; text-align:center; text-decoration:none!important; }
.vertical>ul>li>a { border-top:1px solid #353535; border-bottom:1px solid #161616;}
.vertical>ul>li ul li a { height:0; transition:.3s ease-out}
.vertical>ul>li:hover ul li a { height:30px; }
.vertical>ul>li:hover ul { opacity:1; }
.vertical > ul > li li:hover { box-shadow:inset 0 1px #4077CB,inset 0 -1px #4077cb; background:#3e6db5;}
.vertical > ul > li li:hover a{color:#fff }