12+ CSS Vertical Menu Examples

This post contains a total of 12+ Hand-Picked CSS Vertical Menu Examples with Source Code. All these Vertical Menus are made using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

CSS Vertical Menu Examples

1. By Alex Paul

Made by Alex Paul. CSS Vertical menu, dark themed with colorful hover effects. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Exo:800" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1">
 
<style>
*{
  box-sizing: border-box;
}

body{
  background: #353535;
  font-family: 'Exo', sans-serif;
  font-size: 18px;
}

nav{
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 230px;
  height: 100vh;
  background: #1e1e1e;
}

nav>ol{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.menu-item{
  position: relative;
  padding: .75rem 2rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-item:after{
  position: absolute;
  content: '';
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  z-index: -1;
  box-shadow: 0 0 0 0 #1e1e1e;
  transition: .2s all linear;
}

.menu-item:nth-child(1):after{
  background: Crimson;
}

.menu-item:nth-child(2):after{
  background: Goldenrod;
}

.menu-item:nth-child(3):after{
  background: DodgerBlue;
}

.menu-item:nth-child(4):after{
  background: BlueViolet;
}

.menu-item:nth-child(5):after{
  background: ForestGreen;
}

.menu-item:hover:after{
  width: 100%;
}

.menu-item:nth-child(3):hover:after, .menu-item:nth-child(4):hover:after{
  width: 200%;
  box-shadow: 8px 8px 0 0 #1e1e1e;
}

.menu-item:hover .sub-menu{
  visibility: visible;
  opacity: 1;
  transform: scale(1);
}

.sub-menu{
  position: absolute;
  left: 100%;
  height: 100%;
  width: 230px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  visibility: hidden;
  opacity: 0;
  transform: scale(0);
  transition: .2s all ease-in-out;
  transition-delay: .2s;
  transform-origin: left;
}

.submenu-item{
  padding: .75rem 2rem;
  transition: .2s all linear;
  border-radius: 5px 0 0 5px;
}

.submenu-item:hover{
  background: rgba(0,0,0,.2);
}

.menu-item>a, .submenu-item>a{
  color: #eaeaea;
  text-decoration: none;
}
</style>
</head>
<body>
  <nav class="menu">
  <ol>
    <li class="menu-item"><a href="#0">Home</a></li>
    <li class="menu-item"><a href="#0">About</a></li>
    <li class="menu-item">
      <a href="#0">Widgets</a>
      <ol class="sub-menu">
        <li class="submenu-item"><a href="#0">Big Widgets</a></li>
        <li class="submenu-item"><a href="#0">Bigger Widgets</a></li>
        <li class="submenu-item"><a href="#0">Huge Widgets</a></li>
      </ol>
    </li>
    <li class="menu-item">
      <a href="#0">Kabobs</a>
      <ol class="sub-menu">
        <li class="submenu-item"><a href="#0">Shishkabobs</a></li>
        <li class="submenu-item"><a href="#0">BBQ kabobs</a></li>
        <li class="submenu-item"><a href="#0">Summer kabobs</a></li>
      </ol>
    </li>
    <li class="menu-item"><a href="#0">Contact</a></li>
  </ol>
</nav>
</body>
</html>

2. By Gunnar Halen

Made by Gunnar Halen. Vertical menu using icons and slide animation on hover. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
body{
background: url(http://thepatternlibrary.com/img/ae.jpg);
}
</style>
  
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'>
  
<style>
@import 'https://fonts.googleapis.com/css?family=Roboto';
.side-menu {
  font-family: 'Roboto', sans-serif;
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 60px;
  list-style-type: none;
  background: #f32c52;
  overflow: hidden;
  transition: width .3s;
}

.side-menu:hover {
  width: 300px;
}

.side-menu li {
  width: 300px;
}

.side-menu li span {
  font-size: 1rem;
  margin: 20px 30px 0 22px;
}

.side-menu li a {
  display: block;
  font-size: .9rem;
  text-decoration: none;
  color: #FFF;
  height: 60px;
}

.side-menu li a:hover,
.side-menu li:first-child a {
  background: #14081d;
  display: block;
}
</style>
</head>
<body>
  <ul class="side-menu">
<li><a href="#"><span class="fa fa-code"></span>Text here</a></li>
<li><a href="#"><span class="fa fa-cog"></span>Text here</a></li>
<li><a href="#"><span class="fa fa-font"></span>Text here</a></li>
<li><a href="#"><span class="fa fa-caret-square-o-right"></span>Text here</a></li>
<li><a href="#"><span class="fa fa-check-square"></span>Text here</a></li>
<li><a href="#"><span class="fa  fa-square"></span>Text here</a></li>
<li><a href="#"><span class="fa fa-bars"></span>Text here</a></li>
</ul>
</body>
</html>

3. By Thomas

Made by Thomas. Vertical menu made using wordpress code. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
  
<style>
@charset "UTF-8";
body {
  padding: 0px;
  margin: 0;
  background-color: #57b64f;
  position: relative;
}
body h1 {
  color: white;
  position: absolute;
  right: 20px;
  bottom: -100vh;
  text-transform: uppercase;
  text-align: right;
  font-size: 60px;
  font-weight: 700;
}

header#mainHeader {
  width: 60px;
  height: 100%;
  left: 0;
  transition: left 0.5s ease-in-out 0.2s;
  position: fixed;
  display: inline-block;
  background-color: #3a4151;
  z-index: 1000;
}
header#mainHeader nav {
  height: 100%;
  width: 60px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  /*
  	position:absolute;
  	left:0;
  */
  /* L'element */
}
header#mainHeader nav .top-header {
  background-color: #3a4151;
  position: relative;
}
header#mainHeader nav:after {
  content: " ";
  background-color: #3a4151;
  width: 60px;
  height: 100%;
  position: absolute;
  left: 0px;
}
header#mainHeader nav:before {
  content: " ";
  height: 100%;
  width: 0px;
  background-color: #424a5c;
  position: absolute;
  left: 60px;
  transition: width 0.2s cubic-bezier(0.6, -0.28, 0.735, 0.045);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
header#mainHeader nav .navBurger {
  cursor: pointer;
  width: 100%;
  height: 45px;
}
header#mainHeader nav .navBurger .burger {
  margin-left: 18px;
  margin-top: 30px;
  cursor: pointer;
  /* pour crΓ©er le hamburger, on dΓ©cale les deux
   * barres de 8px
   */
}
header#mainHeader nav .navBurger .burger, header#mainHeader nav .navBurger .burger::before, header#mainHeader nav .navBurger .burger::after {
  border-radius: 2px;
  position: absolute;
  z-index: 100;
  width: 24px;
  height: 4px;
  background: white;
  transition: all 0.3s;
}
header#mainHeader nav .navBurger .burger::before, header#mainHeader nav .navBurger .burger::after {
  content: "";
  display: block;
}
header#mainHeader nav .navBurger .burger::before {
  margin-top: -8px;
}
header#mainHeader nav .navBurger .burger::after {
  margin-top: 8px;
}
header#mainHeader nav ul {
  position: absolute;
  margin: 0;
  padding: 0;
  width: 100%;
  margin-top: calc(50vh - 160px);
}
header#mainHeader nav ul li {
  font-size: 14px;
  width: 60px;
  height: 40px;
  cursor: pointer;
  position: relative;
  display: block;
}
header#mainHeader nav ul li a {
  width: 150px;
  color: white;
  position: relative;
  z-index: 0;
  opacity: 0;
  left: -80px;
  text-transform: uppercase;
  transition: left 0.2s cubic-bezier(0.6, -0.28, 0.735, 0.045), opacity 0.15s cubic-bezier(0.6, -0.28, 0.735, 0.045);
  color: #fff;
  text-decoration: none;
}
header#mainHeader nav ul li:before {
  z-index: 10;
  content: " ";
  width: 8px;
  height: 8px;
  background-color: transparent;
  position: absolute;
  left: 26px;
  top: 16px;
  border-radius: 50%;
  border: 2px solid white;
  transform: scale(1) translate3d(0, 0, 0);
  transition: all 0.2s ease-in-out;
}
header#mainHeader nav ul li a:hover, header#mainHeader nav ul li a:active, header#mainHeader nav ul li a:visited, header#mainHeader nav ul li a:focus {
  background-color: transparent !important;
  color: white;
}
header#mainHeader nav ul li:hover:before {
  background-color: white;
}
header#mainHeader nav ul li.active:before, header#mainHeader nav ul li:hover:before {
  transform: scale(1.5) translate3d(0, 0, 0);
  background-color: white;
}
header#mainHeader nav:hover:before {
  width: 160px;
  transition: width 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
header#mainHeader nav:hover .burger {
  /* 		background:transparent; */
  transform: rotate(45deg) translate3d(0, 0, 0);
}
header#mainHeader nav:hover .burger::before {
  margin-top: 0px;
  transform: rotate(-90deg) translate3d(0, 0, 0);
}
header#mainHeader nav:hover .burger::after {
  margin-top: 0px;
  transform: rotate(0deg) translate3d(0, 0, 0);
}
header#mainHeader nav:hover li a {
  left: 70px;
  opacity: 1;
  transition-duration: 0.4s;
  transition-property: left, opacity;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
header#mainHeader nav:hover li:nth-child(1) a {
  transition-delay: 0.3s;
}
header#mainHeader nav:hover li:nth-child(2) a {
  transition-delay: 0.34s;
}
header#mainHeader nav:hover li:nth-child(3) a {
  transition-delay: 0.38s;
}
header#mainHeader nav:hover li:nth-child(4) a {
  transition-delay: 0.42s;
}
header#mainHeader nav:hover li:nth-child(5) a {
  transition-delay: 0.46s;
}
header#mainHeader nav:hover li:nth-child(6) a {
  transition-delay: 0.5s;
}
header#mainHeader nav:hover li:nth-child(7) a {
  transition-delay: 0.54s;
}
header#mainHeader nav:hover li:nth-child(8) a {
  transition-delay: 0.58s;
}
</style>
</head>
<body>
  <header class="banner" id="mainHeader" role="banner">

    <nav role="navigation">
        <div class="top-header">
            <div class="navBurger">
                <div class="burger"></div>
            </div>
        </div>
 
<!-- This part is the navigation generated by WordPress.  -->
        <ul id="menu-vertical-menu" class="nav">
            <li><a href="#">This menu</a></li>
            <li><a href="#">is built from</a></li>
            <li><a href="#">WP navigation</a></li>
            <li><a href="#">and only made</a></li>
            <li><a href="#">with custom</a></li>
            <li><a href="#">css !</a></li>
		</ul>
    </nav>
    
</header>

<h1>
    It's a<br>kind of<br>maaaagic !
</h1>
</body>
</html>

4. By Mina D

Made by Mina D. CSS Vertical menu with tooltips. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  
<style>
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  font-size: 1rem;
  line-height: 1.7rem;
  color: #222;
}
a {
  text-decoration: none;
}
nav {
  margin: 0;
  padding: 0;
}
.mainNav {
  position: fixed;
  height: 100%;
  width: 10%;
  max-width: 100px;
  min-width: 50px;
  background: #333333;
  color: #ffffff;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mainMenu .menuItem {
  position: relative;
  width: 100%;
  height: 100px;
  border-bottom: solid 1px #555555;
  text-align: center;
}

.mainMenu .menuItem a {
  color: #ffffff;
  font-size: 2rem;
  line-height: 100px;
  display: block;
}
.mainMenu .menuItem a:hover{
  background: #444;
}

.tooltip {
  position: absolute;
  z-index: 999;
  left: 100%;
  bottom: 50%;
  transform: translateY(50%);
  background: #444;
  padding: 0.75rem;
  border-radius: 0.5rem;
  font-family: sans-serif;
  font-size: 1rem;
  text-transform: uppercase;
  color: #dddddd;
  margin-left: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.35s;
}
.tooltip::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 0.5rem solid transparent;
  border-bottom: 0.5rem solid transparent;
  border-right: 0.5rem solid #444;
  position: absolute;
  left: -0.5rem;
}

.menuItem:hover .tooltip {
  opacity: 1;
  visibility: visible;
  margin-left: 0.5rem;
  z-index: 100;
}

main {
  position: absolute;
  margin-left: 10%;
  width: 70%;
  z-index: -1;
}
p {
  margin-top: 0;
}

.mainContent {
  position: absolute;
  left: 2rem;
  top: 0;
  visibility: hidden;
  opacity: 0;
  margin-left: 0;
  margin-top: 2rem;
  transition: all 0.35s;
}
.mainContent:target {
  visibility: visible;
  opacity: 1;
  margin-left: 1rem;
  transition: all 0.35s;
}
</style>
</head>
<body>
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">

<nav class="mainNav">
  <ul class="mainMenu">
    <li class="menuItem"><a href="#home"><i class="fa fa-home" aria-hidden="true"></i></a><span class="tooltip">Home</span></li>
    <li class="menuItem"><a href="#about"><i class="fa fa-user" aria-hidden="true"></i>
</a><span class="tooltip">About</span></li>
    <li class="menuItem"><a href="#portfolio"><i class="fa fa-eye" aria-hidden="true"></i></a>
<span class="tooltip">Portfolio</span></li>
    <li class="menuItem"><a href="#contact"><i class="fa fa-envelope" aria-hidden="true"></i>
</a><span class="tooltip">Contact</span></li>
  </ul>
</nav>
<main>
  <section id="home" class="mainContent">
    <h1>Home</h1>
    <p>Lorem ipsum</p>
  </section> 
  <section id="about" class="mainContent">
    <h1>About</h1>
    <p>Lorem ipsum.</p>
  </section> 
  <section id="portfolio" class="mainContent">
    <h1>Portfolio</h1>
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
  </section> 
  <section id="contact" class="mainContent">
    <h1>Contact</h1>
    <p>Lorem ipsum</p>
  </section> 
</main>
</body>
</html>

5. By Jitendra

Made by Jitendra. Pure CSS3 Vertical menu with nice hover effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css'>
  
<style>
ul
{
margin:0px;
padding:0px;
list-style-type:none;
-webkit-backface-visibility: hidden; backface-visibility: hidden;  
}
.var_nav
{
position:relative;
background:#ccc; 
width:300px;
height:70px;
margin-bottom:5px;
}
.link_bg
{
 width:70px;
 height:70px;
 position:absolute;
 background:#E01B6A;
 color:#fff;
 z-index:2;
}
.link_bg i
{
 position:relative;
}
.link_title
{
position:absolute;
width:100%;
z-index:3;
color:#fff;
}
.link_title:hover .icon
{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);  
}
.var_nav:hover .link_bg
{
width:100%;
background:#E01B6A;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;  
}
.var_nav:hover a
{
font-weight:bold;
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out; 
-o-transition:all .5s ease-in-out; 
-ms-transition:all .5s ease-in-out;
 transition:all .5s ease-in-out;  
}
.icon
{
position:relative;
width:70px;
height:70px;
text-align:center;
color:#fff;
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out; 
-o-transition:all .5s ease-in-out; 
-ms-transition:all .5s ease-in-out;   
float:left;
transition:all .5s ease-in-out;   
float:left;  
}
.icon i{top:22px;position:relative;}
a{
display:block;
position:absolute;
float:left;
font-family:arial;
color:#fff;
text-decoration:none;
width:100%;
height:70px;
text-align:center;
}
span
{
margin-top:25px;
display:block;
}
</style>
</head>
<body>
  <nav>
  <UL>
   <li class="var_nav">
      <div class="link_bg"></div>
      <div class="link_title">
        <div class=icon> 
        <i class="icon-mobile-phone icon-2x"></i>
        </div>
        <a href="#"><span>About Us</span></a>
      </div>
   </li>
   <li class="var_nav">
      <div class="link_bg"></div>
      <div class="link_title">
        <div class=icon> 
        <i class="icon-lightbulb icon-2x"></i>
        </div>
        <a href="#"><span>Ideas</span></a>
      </div>
   </li>
   <li class="var_nav">
      <div class="link_bg"></div>
      <div class="link_title">
        <div class=icon> 
        <i class="icon-wrench icon-2x"></i>
        </div>
        <a href="#"><span>Services</span></a>
      </div>
   </li>
   <li class="var_nav">
      <div class="link_bg"></div>
      <div class="link_title">
        <div class=icon> 
        <i class="icon-briefcase icon-2x"></i>
        </div>
      <a href="#"><span>Marketing</span></a>
      </div>
   </li>
  </UL>
</nav>
</body>
</html>

6. By Abhishek Patel

Made by Abhishek Patel. Vertical Multi dropdown menu with arrow animation and hover effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<style>
body{
	background: #D2D2D2;
}
#nav{
}
ul#navbar{
	list-style-type: none;
}
ul#navbar li{
	display: block;
	width: 180px;
	background: #002B55;
	border: 1px solid #4B4B4B;
	border-left: 4px solid #808000;
}
ul#navbar li a{
	display: block;
	color: #ffffff;
	font-size: 1.2em;
	padding: 20px 0 10px 40px;
	text-decoration: none;
	transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	-o-transition:all 0.3s ease;
}
ul#navbar li a:hover{
	padding-left: 50px;
	background: #008080;
}


ul#navbar > li > ul{
	display: none;
}
ul#navbar > li:nth-child(2):hover > ul{
	position: absolute;
	display: block;
	left: 242px;
	top: 71px;
}
ul#navbar > li:nth-child(2) > ul > li{
	margin-left: -50px;
	background: #D50000;
	border: 1px solid #4B4B4B;
	border-left: 2px solid #002B55;
}
ul#navbar > li:nth-child(2) > ul > li > a:hover{
	padding-left: 50px;
	background: #800055;
	border-left: 4px solid #808000;
}


ul#navbar > li:nth-child(3):hover > ul{
	position: absolute;
	display: block;
	left: 242px;
	top: 122px;
}
ul#navbar > li:nth-child(3):hover > ul > li{
	margin-left: -50px;
	background: #D50000;
	border: 1px solid #4B4B4B;
	border-left: 2px solid #002B55;
}
ul#navbar > li:nth-child(3):hover > ul > li> a:hover{
	padding-left: 45px;
	background: #00AAFF;
	border-left: 4px solid #808000;
}
ul#navbar > li:nth-child(3) > ul > li:first-child > a:hover{
	background: #00AAFF;
}
ul#navbar > li:nth-child(3) > ul > li:nth-child(2)> a:hover{
	background: #002AD5;
}
ul#navbar > li:nth-child(3) > ul > li:nth-child(3)> a:hover{
	background: #F74D22;
}
ul#navbar > li:nth-child(3) > ul > li:last-child> a:hover{
	background: #2222F7;
}


ul#navbar > li > ul > li > ul{
	display: none;
}
ul#navbar > li > ul > li:first-child:hover > ul{
	position: absolute;
	display: block;
	left: 182px;
	top: 0px;
}
ul#navbar > li > ul > li:first-child > ul > li{
	margin-left: -50px;
	background: #00AA80;
	border: 1px solid #4B4B4B;
	border-left: 2px solid #002B55;
}

ul#navbar > li > ul > li:nth-child(2):hover > ul{
	position: absolute;
	display: block;
	left: 182px;
	top: 53px;
}
ul#navbar > li > ul > li:nth-child(2) > ul > li{
	margin-left: -50px;
	background: #D58000;
	border: 1px solid #4B4B4B;
	border-left: 2px solid #002B55;
}

ul#navbar > li > ul > li:nth-child(3):hover > ul{
	position: absolute;
	display: block;
	left: 182px;
	top: 107px;
}
ul#navbar > li > ul > li:nth-child(3) > ul > li{
	margin-left: -50px;
	background: #D50055;
	border: 1px solid #4B4B4B;
	border-left: 2px solid #002B55;
}
ul#navbar > li > ul > li > ul > li > a:hover{
	padding-left: 50px;
	background: #00802B;
	border-left: 4px solid #D50000;
}
ul#navbar > li > ul > li > ul > li:last-child:hover > a:hover{
	padding-left: 30px;
	background: #00802B;
	border-left: 4px solid #D50000;
}


ul#navbar > li > ul > li > ul > li > ul{
	display: none;
}
ul#navbar > li > ul > li > ul > li:last-child:hover > ul{
	background: red;
	position: absolute;
	display: block;
	left: 182px;
	top: 215px;
}
ul#navbar > li > ul > li > ul > li > ul > li{
	margin-left: -50px;
	background: #550055;
	border: 1px solid #4B4B4B;
	border-left: px solid #002B55;
}
ul#navbar > li > ul > li > ul > li:last-child:hover > ul > li >a:hover{
	padding-left: 50px;
	background: #FF5500;
	border-left: 4px solid #FF00D5;
}

#arrow{
	font-size: 1em;
	margin-left: 40px;
	animation: arrow 2s infinite ease;
	-webkit-animation: arrow 2s infinite ease;
	-moz-animation: arrow 2s infinite ease;
	-o-animation: arrow 2s infinite ease;
}
@keyframes arrow{
	0%{
		margin-left: 40px;
	}
	50%{
		margin-left: 30px;
	}
	100%{
		margin-left: 40px;
	}
}
@-webkit-keyframes arrow{
	0%{
		margin-left: 40px;
	}
	50%{
		margin-left: 30px;
	}
	100%{
		margin-left: 40px;
	}
}
@-moz-keyframes arrow{
	0%{
		margin-left: 40px;
	}
	50%{
		margin-left: 30px;
	}
	100%{
		margin-left: 40px;
	}
}
@-o-keyframes arrow{
	0%{
		margin-left: 40px;
	}
	50%{
		margin-left: 30px;
	}
	100%{
		margin-left: 40px;
	}
}
#det{
	position: absolute;
	top: 0;
	left: 500px;
	font-size: 4em;
	text-shadow: 2px 2px 10px #000000;
}
</style>
</head>
<body>
  <!DOCTYPE html>
<html>
<head>
	<title>Heading</title>
</head>
<body>
	<div id="nav">
		<ul id="navbar">
			<li><a href="#">Home</a></li>
			<li><a href="#">Gallery<span id="arrow"> &rsaquo;&rsaquo;</span></a>
				<ul>
					<li><a href="#">Drop1<span id="arrow"> &rsaquo;&rsaquo;</span></a>
						<ul>
							<li><a href="#">Drop1 of 1</a></li>
							<li><a href="#">Drop2 of 1</a></li>
							<li><a href="#">Drop3 of 1</a></li>
							<li><a href="#">Drop4 of 1</a></li>
							<li><a href="#">Drop5 of 1</a></li>
						</ul>
					</li>
					<li><a href="#">Drop2<span id="arrow"> &rsaquo;&rsaquo;</span></a>
						<ul>
							<li><a href="#">Drop1 of 2</a></li>
							<li><a href="#">Drop2 of 2</a></li>
							<li><a href="#">Drop3 of 2</a></li>
							<li><a href="#">Drop4 of 2</a></li>
							<li><a href="#">Drop5 of 2</a></li>
						</ul>
					</li>
					<li><a href="#">Drop3<span id="arrow"> &rsaquo;&rsaquo;</span></a>
						<ul>
							<li><a href="#">Drop1 of 3</a></li>
							<li><a href="#">Drop2 of 3</a></li>
							<li><a href="#">Drop3 of 3</a></li>
							<li><a href="#">Drop4 of 3</a></li>
							<li><a href="#">Drop5 of 3<span id="arrow">&rsaquo;&rsaquo;</span></a>
								<ul>
									<li><a href="#">Level3</a></li>
									<li><a href="#">Level3</a></li>
									<li><a href="#">Level2</a></li>
									<li><a href="#">Level3</a></li>
								</ul>
							</li>
						</ul>
					</li>
					<li><a href="#">Drop4</a></li>
				</ul>
			</li>
			<li><a href="#">Social<span id="arrow"> &nbsp;&nbsp;&rsaquo;&rsaquo;</span></a>
				<ul>
					<li><a href="#">Twitter</a></li>
					<li><a href="#">Vkontakte</a></li>
					<li><a href="#">Google Plus</a></li>
					<li><a href="#">Facebook</a></li>
				</ul>
			</li>
			<li><a href="#">Contact</a></li>
			<li><a href="#">About Us</a></li>
		</ul>
		<span id="det">Vertical menu</span>
	</div>
</body>
</html>

7. By Dwight Maskew

Made by Dwight Maskew. CSS Vertical Menu with Sub Navigation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
    
  <meta charset="UTF-8">
  <title></title>

<style>
* {
  font-family: "Segoe UI";
  font-size: 18px;
  line-height: 1.68;
  padding: 0;
  margin: 0;
}

p,
ul,
li,
div,
nav {
  padding: 0;
  margin: 0;
}

body {
  margin: 20px;
}

nav {
  overflow: auto;
  position: relative;
  z-index: 2;
}

.menu {
  background-color: #0c8fff;
  min-width: 200px;
  float: left;
}

nav ul {
  list-style-type: none;
}

nav ul li a {
  padding: 10px 15px;
  display: block;
  color: #fff;
  text-decoration: none;
}

nav ul li a:hover {
  background-color: #007ee9;
}

nav ul li:hover > ul {
  left: 200px;
  -webkit-transition: left 200ms ease-in;
  -moz-transition: left 300ms ease-in;
  -ms-transition: left 300ms ease-in;
  transition: left 300ms ease-in;
}

nav ul li > ul {
  position: absolute;
  background-color: #333;
  top: 0;
  left: -200px;
  min-width: 200px;
  z-index: -1;
  height: 100%;
  -webkit-transition: left 200ms ease-in;
  -moz-transition: left 300ms ease-in;
  -ms-transition: left 300ms ease-in;
  transition: left 300ms ease-in;
}

nav ul li > ul li a:hover {
  background-color: #2e2e2e;
}
</style>
</head>
<body>
  <nav>
  <ul class="menu">
    <li><a href="#">Step 1</a>
      <ul>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
      </ul>
    </li>
    <li><a href="#">Step 2</a>
      <ul>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
      </ul></li>
    <li><a href="#">Step 3</a>
      <ul>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
      </ul></li>
    <li><a href="#">Step 4</a>
      <ul>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
      </ul>
    </li>
    <li><a href="#">Step 5</a>
      <ul>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
      </ul>
    </li>
    <li><a href="#">Step 6</a>
      <ul>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
      </ul>
    </li>
  </ul>
</nav>
</body>
</html>

8. By Jerome Devillers

Made by Jerome Devillers. A simple vertical menu. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
body {
  background: #3f3f3f;
  background: url("https://www.toptal.com/designers/subtlepatterns/patterns/ep_naturalblack.png");
  padding: 0;
  margin: 0;
}

.menu-container {
  height: 100vh;
  overflow-y: scroll;
  width: 100px;
  background: #000;
  float: right;
}
.menu-container div {
  width: 100%;
}
.menu-container div ul {
  padding: 0;
  margin: 0;
}
.menu-container div ul li {
  padding: 1em 0;
  width: 100%;
  text-align: center;
  display: block;
  color: #ece6c2;
}
.menu-container div ul li.active, .menu-container div ul li:hover {
  width: 100%;
  padding: 1em 0;
  text-align: center;
  display: block;
  background: #ece6c4;
  transition: all 0.2s ease-in;
}
.menu-container div ul li.active a, .menu-container div ul li:hover a {
  color: #d96f57;
}
.menu-container div ul li a {
  color: #ece6c2;
  text-decoration: none;
  font-family: Arial;
}
.menu-container div ul span {
  text-transform: uppercase;
  display: block;
  text-align: center;
  font-weight: bold;
}
.menu-container div ul span.month {
  font-size: 15px;
}
.menu-container div ul span.year {
  font-size: 12px;
}
</style>
</head>
<body>
  <div class="menu-container">
	<div>
		<ul>
			<li>
				<a href="#">
					<span class="month">AUG</span>
					<span class="year">1914</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="month">APR</span>
					<span class="year">1915</span>
				</a>
			</li>
			<li class="active">
				<a href="#">
					<span class="month">JUL</span>
					<span class="year">1916</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="month">NOV</span>
					<span class="year">1918</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="month">DEC</span>
					<span class="year">1921</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="month">NOV</span>
					<span class="year">1925</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="month">OCT</span>
					<span class="year">1929</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="month">DEC</span>
					<span class="year">1931</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="month">JUL</span>
					<span class="year">1936</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="month">SEP</span>
					<span class="year">1939</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="month">J-D</span>
					<span class="year">1940</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="month">-</span>
					<span class="year">1941</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="month">AUG</span>
					<span class="year">1942</span>
				</a>
			</li>
		</ul>
	</div>
</div>
</body>
</html>

9. By neelam

Made by neelam. Responsive Fix vertical menu. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<style>
@charset "UTF-8";
.nav-side-menu {
  overflow: auto;
  font-family: verdana;
  font-size: 12px;
  font-weight: 200;
  background-color: #2e353d;
  position: fixed;
  top: 0px;
  width: 300px;
  height: 100%;
  color: #e1ffff;
}

.nav-side-menu .brand {
  background-color: #23282e;
  line-height: 50px;
  display: block;
  text-align: center;
  font-size: 14px;
}

.nav-side-menu .toggle-btn {
  display: none;
}

.nav-side-menu ul,
.nav-side-menu li {
  list-style: none;
  padding: 0px;
  margin: 0px;
  line-height: 35px;
  cursor: pointer;
}

.nav-side-menu ul :not(collapsed) .arrow:before,
.nav-side-menu li :not(collapsed) .arrow:before {
  font-family: FontAwesome;
  content: "";
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
  vertical-align: middle;
  float: right;
}

.nav-side-menu ul .active,
.nav-side-menu li .active {
  border-left: 3px solid #d19b3d;
  background-color: #4f5b69;
}

.nav-side-menu ul .sub-menu li.active,
.nav-side-menu li .sub-menu li.active {
  color: #d19b3d;
}

.nav-side-menu ul .sub-menu li.active a,
.nav-side-menu li .sub-menu li.active a {
  color: #d19b3d;
}

.nav-side-menu ul .sub-menu li,
.nav-side-menu li .sub-menu li {
  background-color: #181c20;
  border: none;
  line-height: 28px;
  border-bottom: 1px solid #23282e;
  margin-left: 0px;
}

.nav-side-menu ul .sub-menu li:hover,
.nav-side-menu li .sub-menu li:hover {
  background-color: #020203;
}

.nav-side-menu ul .sub-menu li:before,
.nav-side-menu li .sub-menu li:before {
  font-family: FontAwesome;
  content: "ο„…";
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
  vertical-align: middle;
}

.nav-side-menu li {
  padding-left: 0px;
  border-left: 3px solid #2e353d;
  border-bottom: 1px solid #23282e;
}

.nav-side-menu li a {
  text-decoration: none;
  color: #e1ffff;
}

.nav-side-menu li a i {
  padding-left: 10px;
  width: 20px;
  padding-right: 20px;
}

.nav-side-menu li:hover {
  border-left: 3px solid #d19b3d;
  background-color: #4f5b69;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}

@media (max-width: 767px) {
  .nav-side-menu {
    position: relative;
    width: 100%;
    margin-bottom: 10px;
    height: inherit;
  }

  .nav-side-menu .toggle-btn {
    display: block;
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 10 !important;
    padding: 3px;
    background-color: #ffffff;
    color: #000;
    width: 40px;
    text-align: center;
  }

  .brand {
    text-align: left !important;
    font-size: 22px;
    padding-left: 20px;
    line-height: 50px !important;
  }
}
@media (min-width: 767px) {
  .nav-side-menu .menu-list .menu-content {
    display: block;
  }
}
body {
  margin: 0px;
  padding: 0px;
}
</style>
</head>
<body>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">

<div class="nav-side-menu">
    <div class="brand">Brand Logo</div>
    <i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
  
        <div class="menu-list">
  
            <ul id="menu-content" class="menu-content collapse out">
                <li>
                  <a href="#">
                  <i class="fa fa-dashboard fa-lg"></i> Dashboard
                  </a>
                </li>

                <li  data-toggle="collapse" data-target="#products" class="collapsed active">
                  <a href="#"><i class="fa fa-gift fa-lg"></i> UI Elements <span class="arrow"></span></a>
                </li>
                <ul class="sub-menu collapse" id="products">
                    <li class="active"><a href="#">CSS3 Animation</a></li>
                    <li><a href="#">General</a></li>
                    <li><a href="#">Buttons</a></li>
                    <li><a href="#">Tabs & Accordions</a></li>
                    <li><a href="#">Typography</a></li>
                    <li><a href="#">FontAwesome</a></li>
                    <li><a href="#">Slider</a></li>
                    <li><a href="#">Panels</a></li>
                    <li><a href="#">Widgets</a></li>
                    <li><a href="#">Bootstrap Model</a></li>
                </ul>


                <li data-toggle="collapse" data-target="#service" class="collapsed">
                  <a href="#"><i class="fa fa-globe fa-lg"></i> Services <span class="arrow"></span></a>
                </li>  
                <ul class="sub-menu collapse" id="service">
                  <li>New Service 1</li>
                  <li>New Service 2</li>
                  <li>New Service 3</li>
                </ul>


                <li data-toggle="collapse" data-target="#new" class="collapsed">
                  <a href="#"><i class="fa fa-car fa-lg"></i> New <span class="arrow"></span></a>
                </li>
                <ul class="sub-menu collapse" id="new">
                  <li>New New 1</li>
                  <li>New New 2</li>
                  <li>New New 3</li>
                </ul>


                 <li>
                  <a href="#">
                  <i class="fa fa-user fa-lg"></i> Profile
                  </a>
                  </li>

                 <li>
                  <a href="#">
                  <i class="fa fa-users fa-lg"></i> Users
                  </a>
                </li>
            </ul>
     </div>
</div>
</body>
</html>

10. By nikhil

Made by nikhil. Vertical icons sidebar navigation menu with tooltips. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title> 
<style>
@import url("//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css");
.menu {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background: #fff4f5;
}
.menu li a{
    display:block;
    height:em;
    width:5em;
    text-indent:-500em;
    line-height:5em;
    text-align:center;
    color: #ff5c62;
    background: #fff4f5;
    position: relative;
    border-bottom: 1px solid #ffe2e3;
    transition: background 0.3s ease-in-out;
}
.menu li a:before {
  font-family: FontAwesome;
  speak: none;
  text-indent: 0em;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 1.4em;
}
.menu li a.search:before {
  content: "\f002";
}
.menu li a.archive:before {
  content: "\f187";
}
.menu li a.pencil:before {
  content: "\f040";
}
.menu li a.contact:before {
  content: "\f003";
}
.menu li a.about:before {
  content: "\f007";
}
.menu li a.home:before {
  content: "\f015";
}
.menu li a:hover{
  background: #ff5c62;
  color: #fff;
}
.menu li.current a {
  background: #ff5e5e;
  color: #fff;
}
.menu li a.active {
  background: #ff5e5e;
  color: #fff;
}
.menu li a.active:after{
    position:absolute;
    left:5em;
    top:0;
    content:"";
    border:2.5em solid transparent;
    border-left-color:#ff5c62;
    border-width: 2.5em 1em
}
.menu li{
    position:relative;
}
.menu li:after{
    content: attr(title);
    position:absolute;
    left:5em;
    top:0;
    height:5em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-transform:uppercase;
    background:#ff5c62;
    padding:2em;
    transition: all 0.3s ease-in-out;
    visibility:hidden;
    opacity:0;
}
.menu li:hover:after{
    visibility:visible;
    opacity:1;
}
@media screen and (max-height: 34em){
  .menu li{
    font-size:70%;
  }
}
</style>
</head>
<body>
  <ul class="menu">
  <li title="home"><a href="#" class="home">home</a></li>
  <li title="search"><a href="#" class="search">search</a></li>
  <li title="pencil"><a href="#" class="pencil">pencil</a></li>
  <li title="about"><a href="#" class="active about">about</a></li>
  <li title="archive"><a href="#" class="archive">archive</a></li>
  <li title="contact"><a href="#" class="contact">contact</a></li>
</ul>
</body>
</html>

11. By Ahmed beheiry

Made by Ahmed beheiry. Vertical menu with simple hover effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'>
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Indie+Flower'>
<style>
/** start of the vertical list **/
* {box-sizing: border-box;}
html, body {height:100%;}
body {background: #eee;}
.vertical-list {
  padding: 0;
  margin:0;
  text-align:center;
  height:100%;
}

ul {
  list-style:none;
  padding: 0;
  margin:0;
  background:#1C6FA0;
  width:100px;
  height:100%;
  text-align:center;
}

ul li {
  height:20%;
  width:100%;
  border-bottom:1px solid #4398CA;
  line-height:110px;
  transition:all 300ms ease-in-out;
}

ul li a {
  color:#fff;
  font-size:40px;
  display:block;
}

ul li:hover {
  background:#4398CA;
  border-left:4px solid #1C6FA0;
  border-top:4px solid #1C6FA0;
  cursor:pointer;
}

.tooltip {
  position:relative;
}

.tooltip:hover:after {
  background:#333;
  color:#fff;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  bottom: -1px;
  color: #fff;
  width:90px;
  height:100%;
  content: attr(data-attr);
  left: 96px;
  position: absolute;
  z-index: 98;
  font-size:20px;
  font-weight:700;
  text-transform: capitalize;
  font-family: 'Indie Flower', cursive;
}


/** end of the vertical list **/
</style>
</head>
<body>
  <div class="vertical-list">
  <ul> <!-- start of the list ul -->
    <li class="tooltip" data-attr="home"><a href="#"><i class="fa fa-home"></i></a></li>
    <li class="tooltip" data-attr="gallery"><a href="#"><i class="fa fa-image"></i></a></li>
    <li class="tooltip" data-attr="team"><a href="#"><i class="fa fa-group"></i></a></li>
    <li class="tooltip" data-attr="e-mail"><a href="#"><i class="fa fa-envelope"></i></a></li>
    <li class="tooltip" data-attr="mobile"><a href="#"><i class="fa fa-mobile"></i></a></li>
  </ul> <!-- end of the list ul -->
</div> <!-- end of the vertical list div -->
</body>
</html>

12. By Angela Velasquez

Made by Angela Velasquez. Pure css vertical menu. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
body{
  background: #A2E88C;
}

.menu{
  display: block;
  position: relative;
  margin: 10px;
  height: 500px;
  width: 120px;
  overflow: hidden;
}

.menu ul{
  display: block;
  list-style:none;
  text-align:center;
  padding: 0;
  margin: 0;
}

.menu ul li{
  display: block;
  background: #333;
  border-bottom: 1px solid #222;
  border-top: 1px solid #444;
  font-family: sans-serif;
  width: 100px;
  height: 100px;
}

.menu ul li.tab-fill{
  display: none;
}

.menu ul li a{
  display: block;
  color: #AAA;
  text-decoration: none;
  padding-top: 15px;
  transition: 0.25s;
}

.menu ul li.selected a{
  color: #EEE;
}

.menu ul li.selected a:hover{
  color: #EEE;
  font-size: 1em;
}

.menu ul li a:hover{
  color: #FFF;
  font-size: 1.05em;
}

.menu ul li .icon{
  display: block;
  line-height: 1.75em;
  font-size: 2.5em;
  font-weight: lighter;
  text-shadow: -1px -1px 0px #222;
}

.menu ul li:after{
  width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    top: 40px;
    right: 12px;
    position: absolute;
    content: "";
    z-index: 999;
}

li.selected:after {
    border-left: 8px solid #333;
}

.menu ul.to-change-arrows {
  position: absolute;
  bottom: 0;
  height: 100px;
  width: 100px;
  overflow: hidden;
  border-top: 1px solid #222;
}

.menu ul.to-change-arrows li{
  position: relative;
  height: 100px;
  width: 100px;
  background: #444; 
}

.menu ul.to-change-arrows li span.icon{
  color: #EEE;
  line-height: 2.15em;
}

.menu input[type=checkbox] {
    position: absolute;
    top: -9999px;
    left: -9999px;
}

 input#toggle[type=checkbox]{
     display:none;
 }


label {
    position: absolute;
    height: 100px;
    width: 100px;
    display: block; 
    bottom: 0;
    z-index: 9999;
    cursor: pointer;
}

label:hover {
    background: #FFF;
  opacity: 0.15;
}

/** Magic click trick css **/

.to-change {
        transition: top 0.5s;
        -webkit-transition: top 0.5s;
    }

input[type=checkbox]:checked ~ label {
  bottom: auto;
  top: 0;
}

input[type=checkbox]:checked ~ .to-change {
  position: absolute;
  left: auto;
  top: -310px;
}

input[type=checkbox]:checked ~ .to-change li.tab-fill {
  display: block;
}

input[type=checkbox]:checked ~ .to-change-arrows {
    bottom: auto;
    top: 0;
    border: none;
    border-bottom: 1px solid #222;
}

input[type=checkbox]:checked ~ .to-change-arrows li.more{
    display:none;
}
</style>
</head>
<body>
  <nav class="menu">
    	
  <input type="checkbox" id="toggle">
  <label for="toggle"></label>
  
  <ul class="to-change">
    <li class="selected"><a href="#"><span class="icon">1</span></a></li>
    <li><a href="#"><span class="icon">2</span></a></li>
    <li><a href="#"><span class="icon">3</span></a></li>
    <li class="tab-fill"></li>
    <li><a href="#"><span class="icon">4</span></a></li>
    <li><a href="#"><span class="icon">5</span></a></li>
    <li><a href="#"><span class="icon">6</span></a></li>
    <li><a href="#"><span class="icon">7</span></a></li>
  </ul>
  
  <ul class="to-change-arrows">
    <li class="tab-more more"><span class="icon icon-desktop">+</span></li>
    <li class="tab-more less"><span class="icon icon-desktop">-</span></li>
  </ul>
        
</nav>
</body>
</html>

13. By Noman

Made by Noman. Vertical menu with minimal hover effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  
	<link href='https://fonts.googleapis.com/css?family=Quicksand:400,700' rel='stylesheet' type='text/css' />	
	<link href="https://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css" rel="stylesheet" />

	<style>
	body {
		background:url(https://i.imgur.com/j7qmtFm.png) scroll center center;
		margin:0;
		padding:0;
		font-family:Quicksand;
		font-weight:700;
	}

	ul.form {
		position:absolute;
     left:120px;
		background:#fff;
		width:143px;
                z-index:10;
		margin:100;
		padding:0;
		list-style: none;
		overflow:hidden;
		
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;	
		
		-webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
		-moz-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
		box-shadow:  10px 0px 10px rgba(0, 0, 0, 0.1);	
	}

	.form li a {
		width:225px;
		padding-left:15px;
		height:40px;
		line-height:40px;
		display:block;
		overflow:hidden;
		position:relative;
		text-decoration:none;
		text-transform:uppercase;
		font-size:12px;
		color:#686868;
		
		-webkit-transition:all 0.1s linear;
		-moz-transition:all 0.1s linear;
		-o-transition:all 0.1s linear;
		transition:all 0.2s linear;			
	}

	.form li a:hover {
		background:#efefef;
	}

	.form li a.profile {
		border-left:5px solid #008747;
	}

	.form li a.messages {
			border-left:5px solid #fecf54;
	}
		
	.form li a.settings {
			border-left:5px solid #cf2130;
	}

	.form li a.logout {
			border-left:5px solid #FF3385;
	}	

	.form li a.western {
			border-left:5px solid #0099FF;
	}	

	.form li a.fantasy {
			border-left:5px solid #66FF99;
	}

	.form li:first-child a:hover, .form li:first-child a {
		-webkit-border-radius: 5px 5px 0 0;
		-moz-border-radius: 5px 5px 0 0;
		border-radius: 5px 5px 0 0;
	}

	.form li:last-child a:hover, .form li:last-child a {
		-webkit-border-radius: 0 0 5px 5px;
		-moz-border-radius: 0 0 5px 5px;
		border-radius: 0 0 5px 5px;
	}

	.form li a:hover i {
		color:#ea4f35;
	}

	.form i {
		margin-right:15px;
		
		-webkit-transition:all 0.2s linear;
		-moz-transition:all 0.2s linear;
		-o-transition:all 0.2s linear;
		transition:all 0.2s linear;	
	}

	.form em {
		font-size: 10px;
		background: #ea4f35;
		padding: 3px 5px;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;		
		font-style: normal;
		color: #fff;
		margin-top: 17px;
		margin-right: 15px;
		line-height: 10px;
		height: 10px;		
		float:right;
	}

	.form li.selected a {
		background:#efefef;
	}

	h1 {
		color:#fff;
		margin:0 auto;
		margin-top:120px;
		margin-bottom:40px;
		font-size:30px;
		width:300px;
		text-align:center;
	}
	</style>	
</head>
<body>
	<h1>Menu</h1>
	<ul class="form">
		<li><a class="profile" href="www.google.com">     <i class="icon-user"></i>Home</a></li>
		<li><a class="messages" href="#"><i class="icon-envelope-alt"></i>Adventure<em>5</em></a></li>
		<li><a class="settings" href="#">  <i class="icon-cog"></i>Horror</a></li>
		<li><a class="logout" href="#">    <i class="icon-signout"></i>SciFi</a></li>
		<li><a class="western" href="#">    <i class="icon-signout"></i>Western</a></li>
		<li><a class="fantasy" href="#">    <i class="icon-signout"></i>Fantasy</a></li>
	</ul>
</body>
</html>