Mouse over drop down menus with CSS and PHP - html

Question

I'm trying to create a menu that has a mouse over drop down to select a sub-menu item. I currently have the common menu working, but I can't figure out the best way to go about having the sub menus display beneath their appropriate categories.
The menus currently stretch the table to distorted proportions. I want the current table to keep its size and just drop below the category title, without affecting the category's title table. Should I create another table to display to that or what? I'm not familiar with web programming.
My second problem is probably a very easy one. I'm just not sure what the answer is. I've tried my luck with Google to no avail. What should I set "onMouseOut" display equal to in order to keep the menus populated. The submenu currently disappear when I try to click one of the sub-links.
<td>
<STYLE TYPE="text/css">
#menu1 { display : none }
#menu2 { display : none }
#menu3 { display : none }
A:link {color:blue; text-decoration:none}
A:hover {color:blue; text-decoration:underline}
</STYLE>
<div id="menu">
<table border="0" cellspacing="0" cellpadding="2" align="center">
<tbody>
<tr>
<td style="cursor: pointer; background-color: rgb(204, 238, 255); " onmouseover="this.style.backgroundColor='#E5F6FF';" onmouseout="this.style.backgroundColor='#CCEEFF'" valign="top" align="top-center" onclick="window.location.href='index2.php?page=files'"> Files</td>
<td style="cursor: pointer; background-color: rgb(204, 238, 255); " onmouseover="this.style.backgroundColor='#E5F6FF';" onmouseout="this.style.backgroundColor='#CCEEFF'" valign="top" align="center">
<SPAN onMouseOver="document.all.menu2.style.display = 'block'"onMouseOut="document.all.menu2.style.display = 'none'">
Configuration<BR>
</SPAN>
<SPAN ID="menu2" onClick="document.all.menu1.style.display = 'none'">
System Configuration<BR>
File Configuration<BR>
Network Configuration<BR>
</SPAN>
<td style="cursor: pointer; background-color: rgb(204, 238, 255); " onmouseover="this.style.backgroundColor='#E5F6FF';" onmouseout="this.style.backgroundColor='#CCEEFF'" valign="top" align="center" onclick="window.location.href='index2.php?page=Maintenance'"> Maintenance Mode</td>
<td style="cursor: pointer; background-color: rgb(204, 238, 255); " onmouseover="this.style.backgroundColor='#E5F6FF';" onmouseout="this.style.backgroundColor='#CCEEFF'" valign="top" align="center" onclick="window.location.href='index2.php?page=IETM'"> IETM</td>
<td style="cursor: pointer; background-color: rgb(204, 238, 255); " onmouseover="this.style.backgroundColor='#E5F6FF';"onmouseout="this.style.backgroundColor='#CCEEFF'" valign="top" align="center">
<SPAN onMouseOver="document.all.menu3.style.display = 'block'"onMouseOut="document.all.menu3.style.display = 'none'">
Power Options<BR>
</SPAN>
<SPAN ID="menu3" onClick="document.all.menu1.style.display = 'none'">
Shutdown<BR>
Reboot<BR>
</SPAN>
</td>
</td>
</tr>
</tbody>
</table>
</div>
</TABLE>

Answer 1

first of all do not use tables, they are liming your options in many ways. You can use divs instead or in your particular example(for menu) you could use html lists.
another thing about your concerte problem is if you can use javaScript (to simplify things a bit) and then you could say:
<ul id="menu">
<li id="link1">Link 1
<ul class="dropdown">
<li id="sl1">Sublink 1</li>
<li id="sl2">Sublink 2</li>
<li id="sl3">Sublink 3</li>
</ul>
</li>
<li id="link2">Link 2</li>
...
<li id="link3">Link 3</li>
...
</ul>
with appropriate css ofcourse, and on this use javaScript to ad show/hide functionality:
$(document).ready(function() {
$("#menu li").mouseenter(function(){
$(this).find(".dropdown").show();
});
$("#menu li").mouseleave(function(){
$(this).find(".dropdown").hide();
});
});