Forum Moderators: not2easy
Here's my html, css, and javascript code....If anyone can shed some light it would be much appreciated. Be gentle, I'm not a professional web designer. :)
-----------HTML DOC--------------------------------
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Drop-Down Test</title>
<link rel="stylesheet" type="text/css" href="drop_down_styles.css" />
<script type="text/javascript">
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible";
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility="hidden";
}
</script>
</head>
<body>
<a href="/default.asp">
</a>
<h3>Sample Menu</h3>
<table border="1" summary="Menu Table">
<tr class="bgclr">
<td class="col1" onmouseover="showmenu('general')" onmouseout="hidemenu('general')">
<a href="/default.asp">General Info</a><br />
<table class="menu" id="general">
<tr><td><a href="blank.html">HTML</a></td></tr>
<tr><td><a href="blank.html">XHTML</a></td></tr>
<tr><td><a href="blank.html">SHTML</a></td></tr>
<tr><td><a href="blank.html">SHTML</a></td></tr>
<tr><td><a href="blank.html">SHTML</a></td></tr>
</table>
</td>
<td class="col2" onmouseover="showmenu('departments')" onmouseout="hidemenu('departments')">
<a href="/default.asp">Departments</a><br />
<table class="menu" id="departments">
<tr><td><a href="blank.html">HTML</a></td></tr>
<tr><td><a href="blank.html">XHTML</a></td></tr>
<tr><td><a href="blank.html">SHTML</a></td></tr>
<tr><td><a href="blank.html">SHTML</a></td></tr>
<tr><td><a href="blank.html">SHTML</a></td></tr>
</table>
</td>
<td class="col3" onmouseover="showmenu('cities')" onmouseout="hidemenu('cities')">
<a href="/default.asp">Cities & Towns</a><br />
<table class="menu" id="cities">
<tr><td><a href="blank.html">HTML</a></td></tr>
<tr><td><a href="blank.html">XHTML</a></td></tr>
<tr><td><a href="blank.html">SHTML</a></td></tr>
<tr><td><a href="blank.html">SHTML</a></td></tr>
<tr><td><a href="blank.html">SHTML</a></td></tr>
</table>
</td>
</tr>
</table>
<p>Mouse over these options to see the drop down menus</p>
</body>
</html>
-------------CSS DOC---------------------------------
html {height: 100%; width: 100%;}
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-color: #b0c4de;
font-family: arial;
}
table {
font-size: 80%;
background-color: #4682b4;
width: 100%;
}
tr.bgclr {background-color: #ff8080;}
a {color: black; text-decoration: none; font: bold;}
a:hover {color: #606060;}
table.menu {
font-size: 100%;
position: absolute;
visibility: hidden;
}
td.col1 {width: 34%;}
td.col2 {width: 33%;}
td.col3 {width: 33%;}
Your problem could be the fact your table width is set to 100%. You may want to apply a class to that main table to differentiate it. In effect, by having table {width: 100%;}, all tables regardless of class (table.menu) will have that width. Your other option is assign a width to table.menu which, if that is the case, I suggest using pixels.
Marshall
I did exactly what you told me and that fixed my problem. Having the 100% width on all tables was messing everything up. Nice catch...thanks for your help!
-Patrick
Marshall
