a vertical menu

An Elegant Vertical Menu – CSS

“An Elegant Vertical Menu – CSS” is a simple example of a vertical navigation menu in HTML and CSS.

DEMO LINK: http://parhammajd.co.uk/examples/css/verticalMenu.html



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#navsite p {
display:none;
}
a {
text-shadow:0 -1px 0px rgba(0,0,0,0.8);
outline:none;
}
#navsite {
font-family:Verdana, Geneva, sans-serif;
font-size:1em;
font-weight:bold;
border-right:1px solid #666;
padding:0;
margin-bottom: 1em;
color: #333;
width: 15em;
}
#navsite ul {
list-style-type:none;
margin:0;
padding:0;
}
#navsite ul li {
margin:0;
border-top:1px solid #003;
}
#navsite ul li a:link, #navsite ul li a:visited {
display:block;
padding: 4px 4px 4px 0.5em;
border-left:10px solid #369;
border-right:1px solid #69c;
border-bottom:1px solid #369;
color:#E5DDEAC;
text-decoration:none;
background-color:#495961;
}
#navsite ul li a:hover, #navsite ul li > ul li a:hover {
border-left:10px solid #036;
border-right:1px solid #69c;
background-color:#69f;
color:#fff
}
#navsite ul ul {
background-color:white;
margin-left:10px;
}
#navsite ul li > ul li a:link, #navsite ul li > ul li a:visited {
border-left:10px solid #69c;
border-right:1px solid #9cF;
border-bottom:1px solid #69c;
background-color:#888;
}
</style>
</head>

<body>
<div id="navsite">
<p>Site navigation</p>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Archives</a></li>
<li><a href="#">Portfolio</a></li>
<ul>
<li><a href="#">Web Apps</a></li>
<li><a href="#">mobile Apps</a></li>
</ul>
<li><a href="#">Contact</a></li>
</ul>
</div>
</body>
</html>


Leave a Reply

Your email address will not be published. Required fields are marked *