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

Transfer Your Site

Get the best hosting on the web. We will transfer all your website files. No down-time.

FREE domain transfer
Free domain registration
Outstanding reliability
Marketing tools and search engine advertising

30-Day Money-Back

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.