my menu
this is the code for my menu on the left and can be put inside of a container type div (sidebar)
html markup
<div class="nav"> <h3>menu</h3> <ul> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> </ul> <h3>menu</h3> <ul> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> </ul> <h3>menu</h3> <ul> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> </ul> <h3>menu</h3> <ul> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> </ul> <h3>menu</h3> <ul> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> </ul> </div>
css code
* {
list-style-type : none;
}
body {
width : 50%;
height : 50%;
margin : 10px auto;
}
h3 {
font-size : 16pt;
line-height : 22pt;
}
a {
color : #00077C;
padding : 2px;
text-decoration : none;
}
.nav {
height : 100%;
padding : 3px;
background-color : #574E2B;
}
.nav h3 {
clear : both;
margin : 0 0 5px 0;
}
.nav h3:nth-of-type(n) {
border-top : 3px solid #746425;
}
.nav h3:hover {
cursor : pointer;
}
.nav ul {
clear : both;
margin : 0 0 10px 0;
}
.nav ul li {
float : left;
margin : 0 3px;
}
.nav ul li a {
float : left;
padding : 2px;
}
.nav ul li a:hover {
background-color : #00077C;
color : #FFFFFF;
}

