Post
Ask Question

Vertical Menu Using CSS

Introduction

 
In this article, you will learn how to create a Vertical Menu Bar using CSS.
 
In this article, only CSS is used. Also, onMouseHover shows the Sub Menu.
 
The following code can be used to create a Vertical Menu Bar:
  1. <!doctype html>  
  2. <html>  
  3. <head>  
  4.     <title>vertical menu</title>  
  5.     <style>  
  6.         *  
  7.         {  
  8.             margin: 0px;  
  9.             padding: 0px;  
  10.         }  
  11.         body  
  12.         {  
  13.             background: #fff;  
  14.             font-family: Arial, Helvetica, sans-serif;  
  15.             font-size: 16px;  
  16.             font-weight: lighter;  
  17.             text-transform: capitalize;  
  18.             color: #FFFFFF;  
  19.         }  
  20.         #main  
  21.         {  
  22.             width: 90%;  
  23.             height: 500px;  
  24.             margin: 0px auto;  
  25.         }  
  26.         #menubox  
  27.         {  
  28.             width: 100%;  
  29.         }  
  30.         .menu ul  
  31.         {  
  32.             width: 200px;  
  33.             background: #6633FF;  
  34.         }  
  35.         .menu ul li  
  36.         {  
  37.             list-style: none;  
  38.             position: relative;  
  39.         }  
  40.         .menu ul li a  
  41.         {  
  42.             text-decoration: none;  
  43.             padding: 14px 30px 14px 30px;  
  44.             color: #fff;  
  45.             display: block;  
  46.             border-bottom: 1px solid #fff;  
  47.         }  
  48.         .menu ul li ul  
  49.         {  
  50.             display: none;  
  51.         }  
  52.         .menu ul li:hover ul  
  53.         {  
  54.             position: absolute;  
  55.             left: 180px;  
  56.             top: -47px;  
  57.             display: block;  
  58.             background: #0033CC;  
  59.         }  
  60.         .menu ul li ul li  
  61.         {  
  62.             position: relative;  
  63.         }  
  64.         .menu ul li:hover  
  65.         {  
  66.             background: #0033CC;  
  67.             color: #FFFFFF;  
  68.         }  
  69.         .menu ul li:hover ul li ul  
  70.         {  
  71.             display: none;  
  72.         }  
  73.          
  74.         .menu ul li ul li:hover, .menu ul li ul li a:hover  
  75.         {  
  76.             background: #003366;  
  77.         }  
  78.         .menu ul li ul li ul  
  79.         {  
  80.             display: block;  
  81.         }  
  82.         .menu ul li ul li:hover ul  
  83.         {  
  84.             position: absolute;  
  85.             left: 180px;  
  86.             top: -40px;  
  87.             display: block;  
  88.             background: #003366;  
  89.         }  
  90.         .menu ul li ul li ul li:hover, .menu ul li ul li ul li a:hover  
  91.         {  
  92.             background: #0033CC;  
  93.         }  
  94.     </style>  
  95. </head>  
  96. <body>  
  97.     <div id="main">  
  98.         <div id="menubox">  
  99.             <div class="menu">  
  100.                 <ul>  
  101.                     <li><a href="#">home</a></li>  
  102.                     <li><a href="#">about Us</a></li>  
  103.                     <li><a href="#">service</a>  
  104.                         <ul>  
  105.                             <li><a href="#">service</a></li>  
  106.                             <li><a href="#">service</a></li>  
  107.                             <li><a href="#">service</a></li>  
  108.                             <li><a href="#">service</a>  
  109.                                 <ul>  
  110.                                     <li><a href="#">service</a></li>  
  111.                                     <li><a href="#">service</a></li>  
  112.                                     <li><a href="#">service</a></li>  
  113.                                     <li><a href="#">service</a></li>  
  114.                                 </ul>  
  115.                             </li>  
  116.                         </ul>  
  117.                     </li>  
  118.                     <li><a href="#">Blog</a></li>  
  119.                     <li><a href="#">catagory</a></li>  
  120.                     <li><a href="#">contect Us </a></li>  
  121.                 </ul>  
  122.             </div>  
  123.         </div>  
  124.     </div>  
  125. </body>  
  126. </html> 

TRENDING UP

View All