Create A CSS Vertical 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.


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{
 text-decoration: none;
.howtocreateawebsite ul li a:hover{
 text-decoration: none;
.howtocreateawebsite ul li a:hover{

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

How To Customize The HTML Vertical Menu Code

Please Share

Create An Online Shop

Build your own website and sell stuff. Add as many products as you want and it won't cost you any extra.

Get super fast hosting
Free domain registration
Outstanding reliability
Free shopping basket
Easy to use site builder

Try creating your website free for 30 days. No credit card required, click the below link.

Build and host your own website on super fast reliable hosting.

Free domain included or add a domain you own - Install WordPress in a few clicks - Great support team.

Get a Website that Works. It's quick and easy. No experience necessary.

Sign up today and get 20 percent off your hosting.