Left bar menu : Navigation Bar « CSS Controls « HTML / CSS
- HTML / CSS
- CSS Controls
- Navigation Bar
Left bar menu
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#navsite {
font-size: 0.7em;
width: 12em;
border-right: 1px solid #666;
padding: 0 0 0 0;
margin-bottom: 1em;
float: left;
}
#navsite ul {
list-style: none;
}
#navsite ul li {
border-top: 1px solid #003;
}
#navsite ul li a {
display: block;
padding: 2px 2px 2px 0.5em;
border-left: 10px solid #369;
border-right: 1px solid #69c;
border-bottom: 1px solid #369;
background-color: #036;
color: #fff;
text-decoration: none;
width: 100%;
}
html>body #navsite ul li a {
width: auto;
}
#navsite ul li a:hover {
border-left: 10px solid #036;
border-right: 1px solid #69c;
border-bottom: 1px solid #369;
background-color: #69f;
color: #fff;
}
a {
border-left: 10px solid #f33;
border-right: 1px solid #f66;
border-bottom: 1px solid #f33;
background-color: #fcc;
color: #333;
}
</style>
</head>
<body id="pagespk">
<div id="navsite">
<ul>
<li><a href="http://www.java2s.com" >Home</a></li>
<li><a href="http://www.java2s.com" >About</a></li>
<li><a href="http://www.java2s.com" >Archives</a></li>
<li><a href="http://www.java2s.com" >Writing</a></li>
<li><a href="http://www.java2s.com" >Speaking</a></li>
<li><a href="http://www.java2s.com" >Contact</a></li>
</ul>
</div>
</body>
</html>
Related examples in the same category