CSS3 Vertical Menu

Often we see this problem, when someone is able to create the horizontal menu bar but not able to create the vertical menu bar with CSS3. The term vertical menu with CSS3 can be also represent as CSS3 dropdown menu in vertical way. Sometimes it has been seen that we use the jquery or javascript for consequence such event. Although it can be done with pure CSS3.

Today I am going to demonstrate it with live example. To create this stunning example of vertical menu, one should aware with new trends of CSS3 and simple HTML.

The all major browsers support this vertical menu. But be aware of using on old version of Internet explorer.

Download This Script

Here is the step by step procedure for making this vertical menu with submenu navigation

1)Create an HTML file like this:
<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>CSS3 vertical menu</title>
 </head>
<body>
 <div id="navigation">
  <ul class="top-level">
   <li><a href="#">Menu1</a><span>&gt;&gt;</span>
    <ul class="sub-level">
     <li><a href="#">Sub Menu Item 1</a>
     </li>
     <li><a href="#">Sub Menu Item 2</a><span>&gt;&gt;</span>
      <ul class="sub-level">
       <li><a href="#">Sub Sub Menu Item 1</a></li>
       <li><a href="#">Sub Sub Menu Item 2</a></li>
       <li><a href="#">Sub Sub Menu Item 3</a></li>
       <li><a href="#">Sub Sub Menu Item 4</a></li>
      </ul>
     </li>
     <li><a href="#">Sub Menu Item 3</a></li>
     <li><a href="#">Sub Menu Item 3</a></li>
    </ul>
   </li>
   <li><a href="#">Menu2</a></li>
   <li><a href="#">Menu3</a></li>
   <li>
    <a href="#">Menu4</a><span>&gt;&gt;</span>
    <ul class="sub-level">
     <li><a href="#">Sub Menu Item 1</a></li>
     <li><a href="#">Sub Menu Item 2</a><span>&gt;&gt;</span>
      <ul class="sub-level">
       <li><a href="#">Sub Sub Menu Item 1</a></li>
       <li><a href="#">Sub Sub Menu Item 2</a></li>
       <li><a href="#">Sub Sub Menu Item 3</a></li>
       <li><a href="#">Sub Sub Menu Item 4</a></li>
      </ul>
     </li>
    </ul>
   </li>
   <li>
     <a href="#">Menu5</a>
     <ul class="sub-level">
      <li><a href="#">Sub Menu Item 1</a>
       <ul class="sub-level">
        <li><a href="#">Sub Sub Menu Item 1</a></li>
        <li><a href="#">Sub Sub Menu Item 2</a></li>
        <li><a href="#">Sub Sub Menu Item 3</a></li>
        <li><a href="#">Sub Sub Menu Item 4</a></li>
       </ul>
      </li>
      <li><a href="#">Sub Menu Item 2</a></li>
      <li><a href="#">Sub Menu Item 3</a></li>
     </ul>
   </li>
  </ul>
 </div>
</body>
</html>

Download

2) Now Create a CSS file like this:
#navigation { font-size:0.75em; width:150px; }
#navigation ul { margin:0px; padding:0px; }
#navigation li { list-style: none; } 
 
ul.top-level li {
border-radius:5px;
margin-top:5px;
background: #666;
}
 
#navigation a {
 transition: all .5s ease-out 0s;
 color: #fff;
 cursor: pointer;
 display:block;
 height:25px;
 line-height: 25px;
 text-indent: 10px;
 text-decoration:none;
 width:100%;
 border-radius:5px;
}
 
#navigation a:hover{
 text-decoration:none;
}
 
#navigation li:hover {
 background: #f90;
 transition: all .5s ease-out 0s;
 position: relative;
}

ul.sub-level {
    display: none;
}
 
li:hover .sub-level {
transition: all .5s ease-out 0s;
    background: #999;
    border: #fff solid;
    border-width: 1px;
    display: block;
    position: absolute;
    left: 75px;
    top: 5px;
	border-radius:5px;
}
 
ul.sub-level li {
    border: none;
    float:left;
    width:150px;
	border-radius:5px;
}

/*Seconda Level*/
#navigation .sub-level {
    background: #999;
	transition: all .5s ease-out 0s;
}
 
/*Third Level*/
#navigation .sub-level .sub-level {
    background: #09C;
	transition: all .5s ease-out 0s;
}

/*RESET STYLES*/
li:hover .sub-level .sub-level {
    display:none;
}
 
.sub-level li:hover .sub-level {
    display:block;
	transition: all .5s ease-out 0s;
}

ul.top-level li span
 {
  float:right;
  color: #fff;
  margin-right:10px;
  margin-top:-20px;
 }

Download

Thats all about, Now call this stylesheet inside the your html file. Either put this code in head element and call a link rel method in head section. You can download also a zip file for working vertical menu. Click on the download button

Social Link

Swapnil Raja

Swapnil Raja is a technophile. He writes on scripting language, designing software, web technology, CMS and other technology related stuff. He is aregular contributor on html5andcss3.org. Want to know more about him ? feel free to get in touch with him on different social platform.
Social Link

Latest posts by Swapnil Raja (see all)

Author: Swapnil Raja

Swapnil Raja is a technophile. He writes on scripting language, designing software, web technology, CMS and other technology related stuff. He is a regular contributor on html5andcss3.org. Want to know more about him ? feel free to get in touch with him on different social platform.