CSS vertical menu

In this tutorial / code snippet I will how you how to create CSS VERTICAL MENU

/* global reset */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
font-family: verdana,arial,courier;
}
#nav {
list-style-type: none;
background-color: #CFCF00;
width: 180px;
padding: 0;/* firefox whitespace sorted */
margin: 0;/* firefox whitespace sorted */
float: left;
}
#nav li {
padding: 0;
margin: 0;
float: left;/* whitespace issue in IE sorted */
width: 100%;/* whitespace issue in IE sorted */
}
#nav a {
display: block;
color: #000;
border-bottom: 1px solid #FFF;
padding: 8px 15px;
text-decoration: none;
height: 14px;/* IE full width clickable area sorted */
}
#nav #nav_hide a{
border-bottom: none;/* last link border set to none */
}
#nav a:hover {
background-color: #FCFC11;
}
#nav li.contact a {
background-color: #EEE000;
}
#nav li.contact a:hover {
background-color: #EEE000;/* current page hover color sorted for IE */
}

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>navigation tutorials</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<ul id="nav">
<li id="home"><a href="#">HOME</a></li>
<li id="gallery"><a href="#">GALLERY</a></li>
<li id="testimonials"><a href="#">TESTIMONIALS</a></li>
<li id="about"><a href="#">ABOUT US</a></li>
<li id="nav_hide" class="contact"><a href="#">CONTACT US</a></li>
</ul>
</body>
</html>

See this menu in action - CLICK HERE

Template Categories

Tutorial Categories