CSS MENU

Menu in CSS

Vertical menu Using CSS
HTML Code :

 <ul class="navigation">
          <li>
<a href="#">Home</a>
</li>
         <li>
<a href="#">Blogger For Java</a>
</li>
         <li>
<a href="#">About</a>
         </li>
  </ul>

CSS :

.navigation{margin: 0; padding: 0;}

.navigation {
background: #fff;
overflow: hidden;
width: 500px;
box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.2);
}

.navigation li {
width: 136px; border-left: 5px solid #666;
float: left;
cursor: pointer;
list-style-type: none;

padding: 10px 10px 10px 15px;

-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
}

.navigation li a {
font-family: georgia;
font-weight: normal;
font-style: italic;
font-size: 14px;
margin-bottom: 5px;
line-height: 16px;
text-decoration: none;
}

.navigation li:hover {
background: #333;
border-left: 5px solid #000;
}

.navigation li:hover a {
font-weight: bold;
color: #fff;
}

see the DEMO here

OUTPUT :