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



Comments are closed.

Show Buttons
Hide Buttons