A tutorial on how to make a vertical menu with pure CSS all together with background colors, links and all the things one menu needs.

A tutorial on how to make a vertical menu with pure CSS all together with background colors, links and all the things one menu needs. Also, check out some professional css templates.Ever wonder how they make those cool menus. Well here it is.

First things first, this is pure CSS, no tables! Second thing... no second thing just watch and learn. What we want to do is add a <div> to our HTML code so we can put a list into it.

I use a div called "menuColumn"            <div id="menuColumn">                 <ul>                     <li><a xhref="http://tutorialscentral.com/#">Home</a></li>                     <li><a xhref="http://tutorialscentral.com/#">Links</a></li>                     <li><a xhref="http://tutorialscentral.com/#">Contact</a></li>                 </ul>             </div>

This is a simple unordered list or <ul> with list elements inside and links inside those. Pretty simple HTML for anyone who has ever done any HTML. What we want to do is at the start of the page add the <style> tags so we can add CSS <STYLE type="text/css"> <!-- div#menuColumn {     float: left;     background-color: #AFB;     border-right: 1px solid #000;     width: 130px;     height: 100%; } div#menuColumn ul {     padding-left: 0%;     margin-top: 5px;     margin-left: 0px; } div#menuColumn li {    list-style-type: none;            background-color: #AFB;         } div#menuColumn li:hover {    background-color: #FFF;        } div#menuColumn a {    padding: 0 6px;           text-decoration: none;           color: #069;        } div#menuColumn a:hover {    color: #F33; }        --> </STYLE> What is important to know is that this code will effect only the list in the menuColumn <div> Know how about looking at how the code works. div#menuColumn   <--- the whole <div> {     float: left;  <---- this pushes the complete <div> to up and left as much as it can     background-color: #FFA;  <---- sets the background color of the div     border-right: 1px solid #000;  <--- adds a border     width: 130px;       height: 100%; }

Now for the list menu. It is important to keep even the padding and margin 0 settings or if you wish you can play around and see what that does, that is the best way to learn.

div#menuColumn ul {     padding-left: 0%;     margin-top: 5px;     margin-left: 0px; } div#menuColumn li    <--- list {    list-style-type: none;            background-color: #FFA;         } div#menuColumn li:hover <-- list when you point on it {    background-color: #FFF;        } div#menuColumn a   <---- link {    padding: 0 6px;           text-decoration: none;   <--- this removes the underscore on the link        color: #069;        } div#menuColumn a:hover  <--- link when active {    color: #F33; }