Creating Vertical Menu

I used Coding View in Dreamweaver to do my Vertical Menu

firstly, I create a list of pages I need such as home, contact, about us, product by "ul" and "li" tag.



a result of the code will be presented in the web broswer.



then I create a external CSS file which has coding lines for menu background


.menu
{ padding: 0;
width: 100%;
border-top: 5px solid #D10000; /*Highlight red color theme*/
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}



There is nothing changed at all, then I added more codes to define "ul" tag.

.menu ul
{ margin:0;
margin-left: 40px; /*margin between first menu item and left browser edge*/ padding: 0;
list-style: none;
}

there is also nothing changed again. Next, I defined "li" tag.
.menu li
{ display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}

when I defined "li" tag, all navigation was put in vertical order as a picture shown below:



then I made navigation changed look like buttons by CSS anchor/ link states.
.menu a
{float: left;
display: block;
font: bold 12px Arial;
color: black;
text-decoration: none;
margin: 0 1px 0 0; /*Margin between each menu item*/
padding: 5px 10px 5px 10px; /*Padding within each menu item*/
background-color: lightblue; /*Default menu color*/
border-bottom: 8px solid white;
}



but there is no effect when I point my mouse point on the buttons.

If I want my navigation buttons that will be change when user move their mouse on, I will need to work with CSS hover of anchor.

.menu a:hover
{background-color: #D10000; /*Highlight red color theme*/
padding-top: 10px; /*Set padding-top value to default's padding-top + padding-bottom */
padding-bottom: 0; /*Set padding-bottom value to 0 */
border-bottom-color: #D10000; /*Highlight red color theme*/
color: white;
}



However, If I am reading information on the page that I dont know where I am, I will need make a change on my navigation so that it can tell me which page I am reading with "current" class. it was set in html navigation code.



within CSS file, I code more lines.

.verticalMenu .current a{ /** currently selected menu item **/
background-color: #D10000; /*Highlight red color theme*/
padding-top: 10px; /*Set padding-top value to default's padding-top + padding-bottom */
padding-bottom: 0; /*Set padding-bottom value to 0 */
border-bottom-color: #D10000; /*Highlight red color theme*/
color: white;
}

finally, I can know which page I am reading.