Vertical SubMenu with Effects

Jayakumar 1/05/2009 Vertical SubMenu with Effects 1 comment

#links {
position: relative;
margin:0 auto;
top: 10px;
left: 0;
width: 166px;
height: 500px; 
font: 16px Verdana, sans-serif; 
z-index: 100;
}
#links a {
display: block;
text-align: center;
font: bold 1em sans-serif;
padding: 5px 10px;
margin: 0 0 1px;
border-width: 0;
text-decoration: none; 
color: #CCC;
background: #444;
border-right: 5px solid #505050;
}
#links a:hover {
color: #411;
background: #FFF;
border-right: 5px double #999;}
#links a span{
display: none;
}
#links a:hover span{
display: block;
position: absolute;
top: 180px;
left: 0;
width: 125px;
padding: 5px;
margin: 10px;
color: #999; 
background: black;
font: 10px Verdana, sans-serif;
text-align: center;
}
</style> 
</head> 
<body> 
<div id="links"> 
<a href="http://cssbags.blogspot.com/2009/01/vertical-submenu-with-effects.html">Home The main page of the site-- a jumping-off point, as it were-- and not actually a picture of our house</a> 
<a href="http://cssbags.blogspot.com/2009/01/vertical-submenu-with-effects.html">Links A collection of things which interest me, and might interest you</a> 
<a href="http://cssbags.blogspot.com/">Away A collection of things which interest me, and might interest you</a> 
<a href="http://cssbags.blogspot.com/2009/01/vertical-submenu-with-effects.html">techno He's been called "an internationally recognized expert," but then he's also been called a "techno-fascist"</a> 
<a href="http://cssbags.blogspot.com/2009/01/vertical-submenu-with-effects.html">Meals She cooks fabulous meals, she throws great parties, she helps women deliver their babies-- what can't she do?</a> 
<a href="http://cssbags.blogspot.com/2009/01/vertical-submenu-with-effects.html">Other Inevitably, there's stuff that doesn't fit in with other stuff, so we stuffed it all into this page of random stuff</a> 
</div>