PDA

View Full Version : Horizontal hover menu



techmom
11-25-2005, 03:49 AM
I have copied the code to my page and can see it work, however, how can I put it in a table on my site where I want it? There is no instructions on how to do that. Also, is there a way to do this verticle?
thanks for your help.

jscheuer1
11-26-2005, 07:10 AM
Just putting the html portion (step2) in a table cell seemed to work fine here. A vertical version in a table could be done like so:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
td.hoverm{
height:135px;
padding:0 10px;
vertical-align:top;
background-color: #FFF2BF;
}

*html td.hoverm {
padding-top:10px;
}

.hovermenu {
margin-bottom:-10px;
}

.hovermenu ul{
font: bold 13px arial;
padding-left: 0;
margin-left: 0;
height: 20px;
}

.hovermenu ul li{
list-style: none;
display:block;
margin:8px 0;
}

.hovermenu ul li a{
padding: 2px 0.5em;
text-decoration: none;
color: black;
background-color: #FFF2BF;
border: 2px solid #FFF2BF;
}

.hovermenu ul li a:hover{
background-color: #FFE271;
border-style: outset;
}

html>body .hovermenu ul li a:active{ /* Apply mousedown effect only to NON IE browsers */
border-style: inset;
}
</style>
</head>
<body>
<table>
<tr>
<td class="hoverm"><div class="hovermenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.google.com">Google</a></li>
</ul>
</div></td>
</tr>
</table>


</body>
</html>