A vertical menu

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.

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;
}  

Detailed search engine optimizing usually includes twigging with web page hosting as well. The web host should be compatible with whatever internet marketing program is being employed. Usually cheap web hosting works just as well and webhosting review can help tp determine the best, however with wireless internet service, one can become more adventurous with the layout.