Horizontal Submenu with Effects

Jayakumar 1/05/2009 Horizontal Submenu with Effects 4 comments

}

#links {
position: relative;
margin: 0 auto;
left: 0;
width:900px;
height: 125px; 
font: 16px Verdana, sans-serif;

}
#links li{
FLOAT:LEFT;
WIDTH:166PX;
list-style:NONE;
}
#links li 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 li a:hover {
color: #411;
background: #FFF;
border-right: 5px double #999;}

#links li a span{
display: none;
}
#links li a:hover .home{
display: block;
position: absolute;
left: 30px;
width: 125px;
padding: 5px;
margin: 10px 10px 10px 15px;
color: #999; 
background: #000;
font: 10px Verdana, sans-serif;
text-align: center;
}
#links li a:hover .interest{
display: block;
position: absolute;
left: 145px;
width: 145px;
padding: 5px;
margin: 10px 10px 10px 65px;
color: #999; 
background: #000;
font: 10px Verdana, sans-serif;
text-align: center;
}
#links li a:hover .collection{
display: block;
position: absolute;
left:320px;
width: 125px;
padding: 5px;
margin: 10px 10px 10px 65px;
color: #999; 
background: #000;
font: 10px Verdana, sans-serif;
text-align: center;
}
#links li a:hover .techno{
display: block;
position: absolute;
left: 485px;
width: 125px;
padding: 5px;
margin: 10px 10px 10px 65px;
color: #999; 
background: #000;
font: 10px Verdana, sans-serif;
text-align: center;
}
#links li a:hover .meals{
display: block;
position: absolute;
left: 700px;
width: 125px;
padding: 5px;
margin: 10px;
color: #999; 
background: #000;
font: 10px Verdana, sans-serif;
text-align: center;
}
</style> 
</head> 
 
<body> 
<div id="links"> 
<ul><li> 
<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></li>

<li> 
<li><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></li> 
 
<li><a href="http://cssbags.blogspot.com/2009/01/vertical-submenu-with-effects.html">Away A collection of things which interest me, and might interest you</a></li> 
 
<li><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></li> 
 
<li><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></li>