PUBLISHED: DECEMBER 03, 2013 – ARTICLE: CREATE A CSS MENU

Create a CSS vertical menu for your website. In this HTML tutorial we will guide you on the best way on how to create a CSS vertical menu for your website with a few easy to follow steps. Don’t have a website? Then click here to make a website.

Step1. Go to the demo and confirm this is the type of CSS vertical menu that you are looking for.

Step2. If this is the HTML vertical menu that you want then copy the CSS vertical menu code that is in the light blue section.

Step3. Paste the HTML vertical menu code to your site. Update or publish your page and the menu will be displayed.

Step4. Now you can use the CSS menu code to edit theCSS vertical menu to the style of your choice. Below the CSS code is the menu HTML code, replace the menu sample links and title text with your menu links and titles.

Demo

 
Copy the below CSS vertical menu code

<style type="text/css">
.howtocreateawebsite ul{
 margin: 0;
 padding: 0;
 list-style-type: none;
 font: bold 12px Verdana;
 width: 159px; /* Main Menu Item widths */
 border-bottom: 0px solid #ccc;
 }
  .howtocreateawebsite ul li{
 position: relative;
 }
 /* Top level menu links style */
 .howtocreateawebsite ul li a{
 display: block;
 overflow: auto; /*force hasLayout in IE7 */
 color: #ffffff;
 text-decoration: none;
 padding: 6px;
 border-bottom: 1px solid #FFFFFF;
 border-right: 0px solid #778;
 }
 .howtocreateawebsite ul li a:link, .howtocreateawebsite ul li a:visited, .howtocreateawebsite ul li a:active{
 background-color: #0000FF; /*background of tabs (default state)*/
 }
 .howtocreateawebsite ul li a:visited{
 color:#FFFFFF;
 text-decoration: none;
 }
.howtocreateawebsite ul li a:hover{
 color:#FFFFFF;
 text-decoration: none;
 }
.howtocreateawebsite ul li a:hover{
 background-color:#0000BB;
  } 
</style>

<div class="howtocreateawebsite">
 <ul id="verticalmenu">
   <li><a href="http://www.yourlink.com/" title="Home page">Home</a></li>
   <li><a href="http://www.yourlink.com/" title="Vertical menu code">Vertical Menu</a></li> 
   <li><a href="http://www.yourlink.com/" title="Drop down menu code">Drop Down Menu</a></li>
   <li><a href="http://www.yourlink.com/" title="Free fading banner code">Fading Banner</a></li>
   <li><a href="http://www.yourlink.com/" title="Our web design blog">Web Design Blog</a></li>  
</ul>
</div>

How To Customize The HTML Vertical Menu Code