Create a vertical navigation bar in HTML and CSS
Description
The following code shows how to create a vertical navigation bar.
Example
<HTML>
<head>
<style rel="stylesheet" type="text/css">
#leftside ul.avmenu {<!-- w w w . j a v a2 s . co m-->
list-style: none;
margin: 0 0 18px;
padding: 0;
width: 150px;
}
#leftside ul.avmenu li {
display: inline;
padding: 0;
width: 150px;
}
#leftside ul.avmenu li a {
background: #f4f4f4;
border-bottom: 1px solid #d8d8d8;
border-left: 4px solid #ccc;
border-right: 1px solid #d8d8d8;
border-top: 1px solid #d8d8d8;
color: #505050;
float: left;
font-size: 1em;
font-weight: 700;
margin-bottom: 5px;
padding: 5px 1px 5px 5px;
text-decoration: none;
width: 138px;
}
#leftside ul.avmenu li a:hover,#leftside ul.avmenu li a.current {
background: #eaeaea;
border-bottom: 1px solid #b0b0b0;
border-left: 4px solid #505050;
border-right: 1px solid #b0b0b0;
border-top: 1px solid #b0b0b0;
color: #505050;
}
#leftside ul.avmenu ul {
font-size: 0.9em;
margin: 0 0 0 15px;
padding: 0 0 5px 0;
width: 133px;
}
#leftside ul.avmenu ul a {
padding: 3px 1px 3px 5px;
width: 123px;
}
#leftside ul.avmenu ul ul {
font-size: 1em;
width: 120px;
}
#leftside ul.avmenu ul ul a {
width: 108px;
}
</style>
</head>
<body>
<div id="leftside">
<ul class="avmenu">
<li><a href="">Home</a></li>
<li><a href="">Included styles</a></li>
<li><a class="current" href="">2 columns</a></li>
<li><a href="">3 columns</a></li>
<li><a href="">Theme versions</a></li>
</ul>
</div>
</body>
</html>