Hi Everyone,

I am a total nube to this board, but I read a few messages and it seems you are all able to help me. If you can, please give me some advice as I badly need it.

I recently went through the pain of converting my html page to xhtml1.0, and was successful, until I checked my drop down menu and found it didn't work anymore. It can't jump from the main menu to the boxes below. For the moment I have replaced this section with the original working part, but its no longer xhtml1.0 compliant. I'll put the two bits of code below this so you can all see. The websites name is www.qilingo.com

Thanks again for any help you can provide

Old, working code

<table width="100%" border="0" cellpadding="0"
cellspacing="0" bgcolor="#FFCC66">
<tbody>
<tr>
<td width="13%"></td>

<td width="5%">
<div align="center"><img src="Photos/Home/pensmall.jpg"
width="45" height="45" title="Blog" border="2" alt=""/></div>
</td>

<td width="10%">
<div align="center">
<a href="/blog"><font face="elephant"
size="4px">Blog</font></a>
</div>
</td>


<td width="5%">
<div align="center"><img src="Photos/Home/babytitle.jpg"
width="45" height="45" title="Qi Lin" border="2" alt=""/></div>
</td>

<td width=10%<div align=center onMouseOver="MM_showHideLayers('qilin','','show')" onMouseOut="MM_showHideLayers('qilin','','hide')"> <a href="qilin_about_me.php"><font face="elephant" font size="4px">Qi Lin</font></a></td>


<td width="5%">
<div align="center"><img src="Photos/Home/metitle.jpg"
width="45" height="45" title="Luke" border="2" alt=""/></div>
</td>

<td width=10%<div align=center onMouseOver="MM_showHideLayers('luke','','show')" onMouseOut="MM_showHideLayers('luke','','hide')">< a href="luke_about_me.php"><font face="elephant" font size="4px">Luke</font></a></td>


<td width="5%">
<div align="center"><img src="Photos/Home/youtitle.jpg"
width="45" height="45" title="Hua" border="2" alt=""/></div>
</td>

<td width=10%<div align=center onMouseOver="MM_showHideLayers('hua','','show')" onMouseOut="MM_showHideLayers('hua','','hide')"><a href="hua_about_me.php"><font face="elephant" font size="4px">Hua</font></a></td>


<td width="5%">
<div align="center"><img src="Photos/Home/gbook.jpg"
width="45" height="45" title="Guest Book" border=
"2" alt=""/></div>
</td>

<td width="10%">
<div align="center">
<a href="guestbook/index.php"><font face="elephant"
size="4px">Guest Book</font></a>
</div>
</td>

<td width="12%"></td>
</tr>

<tr>
<td>
<div id="blog" style=
"position:absolute; width:180px; height:0px; z-index:1; visibility: hidden;"
onmouseout="MM_showHideLayers('blog','','hide')"
onmouseover="MM_showHideLayers('blog','','show')">
<table width="100%" border="0" cellpadding="2"
cellspacing="1" bgcolor="#FFFFFF" class="be"><tbody><tr><td></td></tr></tbody>
</table>
</div>
</td>

<td></td>

<td></td>

<td></td>

<td>
<div id="qilin" style=
"position:absolute; width:220px; height:85px; z-index:1; visibility: hidden;"
onmouseout="MM_showHideLayers('qilin','','hide')"
onmouseover="MM_showHideLayers('qilin','','show')" >
<table width="100%" border="0" cellpadding="2"
cellspacing="1" bgcolor="#FFFFFF" class="be">
<tbody>
<tr>
<td bgcolor="#DE0018" onmouseover=
"this.style.background='#990000'" onmouseout=
"this.style.background='#DE0018'">&nbsp; <a href=
"qilin_about_me.php" class='nav'><font color=
"#FFFFFF" face="elephant" size=
"4px">About Me</font></a></td>
</tr>

<tr>
<td bgcolor="#DE0018" onmouseover=
"this.style.background='#990000'" onmouseout=
"this.style.background='#DE0018'">&nbsp; <a href=
"qilin_milestones.php" class='nav'><font color=
"#FFFFFF" face="elephant" size=
"4px">Milestones</font></a></td>
</tr>

<tr>
<td bgcolor="#DE0018" onmouseover=
"this.style.background='#990000'" onmouseout=
"this.style.background='#DE0018'">&nbsp; <a href=
"qilin_monthly_photos.php" class=
'nav'><font color="#FFFFFF" face=
"elephant" size="4px">Monthly
Photos</font></a></td>
</tr>

<tr>
<td bgcolor="#DE0018" onmouseover=
"this.style.background='#990000'" onmouseout=
"this.style.background='#DE0018'">&nbsp; <a href=
"qilin_pregnancy.php" class='nav'><font color=
"#FFFFFF" face="elephant" size=
"4px">Pregnancy</font></a></td>
</tr>

<tr>
<td bgcolor="#DE0018" onmouseover=
"this.style.background='#990000'" onmouseout=
"this.style.background='#DE0018'">&nbsp; <a href=
"qilin_the_legend.php" class='nav'><font color=
"#FFFFFF" face="elephant" size=
"4px">The Legend of Qi Lin</font></a></td>
</tr>
</tbody>
</table>
</div>
</td>

<td></td>

<td>
<div id="luke" style=
"position:absolute; width:180px; height:68px; z-index:1; visibility: hidden;"
onmouseout="MM_showHideLayers('luke','','hide')"
onmouseover="MM_showHideLayers('luke','','show')">
<table width="100%" border="0" cellpadding="2"
cellspacing="1" bgcolor="#FFFFFF" class="be">
<tbody>
<tr>
<td bgcolor="#DE0018" onmouseover=
"this.style.background='#990000'" onmouseout=
"this.style.background='#DE0018'">&nbsp; <a href=
"luke_about_me.php" class='nav'><font color=
"#FFFFFF" face="elephant" size=
"4px">About Me</font></a></td>
</tr>

<tr>
<td bgcolor="#DE0018" onmouseover=
"this.style.background='#990000'" onmouseout=
"this.style.background='#DE0018'">&nbsp; <a href=
"luke_resume.php" class='nav'><font color=
"#FFFFFF" face="elephant" size=
"4px">Resume</font></a></td>
</tr>

<tr>
<td bgcolor="#DE0018" onmouseover=
"this.style.background='#990000'" onmouseout=
"this.style.background='#DE0018'">&nbsp; <a href=
"luke_photos.php" class='nav'><font color=
"#FFFFFF" face="elephant" size=
"4px">Photos</font></a></td>
</tr>

<tr>
<td bgcolor="#DE0018" onmouseover=
"this.style.background='#990000'" onmouseout=
"this.style.background='#DE0018'">&nbsp; <a href=
"luke_lesson_plans.php" class='nav'><font color=
"#FFFFFF" face="elephant" size=
"4px">Lesson Plans</font></a></td>
</tr>
</tbody>
</table>
</div>
</td>

<td></td>

<td>
<div id="hua" style=
"position:absolute; width:180px; height:51px; z-index:1; visibility: hidden;"
onmouseout="MM_showHideLayers('hua','','hide')"
onmouseover="MM_showHideLayers('hua','','show')">
<table width="100%" border="0" cellpadding="2"
cellspacing="1" bgcolor="#FFFFFF" class="be">
<tbody>
<tr>
<td bgcolor="#DE0018" onmouseover=
"this.style.background='#990000'" onmouseout=
"this.style.background='#DE0018'">&nbsp; <a href=
"hua_about_me.php" class='nav'><font color=
"#FFFFFF" face="elephant" size=
"4px">About Me</font></a></td>
</tr>

<tr>
<td bgcolor="#DE0018" onmouseover=
"this.style.background='#990000'" onmouseout=
"this.style.background='#DE0018'">&nbsp; <a href=
"hua_resume.php" class='nav'><font color=
"#FFFFFF" face="elephant" size=
"4px">Resume</font></a></td>
</tr>

<tr>
<td bgcolor="#DE0018" onmouseover=
"this.style.background='#990000'" onmouseout=
"this.style.background='#DE0018'">&nbsp; <a href=
"hua_photos.php" class='nav'><font color=
"#FFFFFF" face="elephant" size=
"4px">Photos</font></a></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>

New, not-working xhtml code

<table width="100%" border="0" cellpadding="0"
cellspacing="0" bgcolor="#FFCC66">
<tbody>
<tr>
<td width="13%"></td>

<td width="5%">
<div align="center"><img src="Photos/Home/pensmall.jpg"
width="45" height="45" title="Blog" border="2" alt=""/></div>
</td>

<td width="10%">
<div align="center" onmouseover=
"MM_showHideLayers('blog','','show')" onmouseout=
"MM_showHideLayers('blog','','hide')">
<a href="/blog"><font face="elephant" size=
"4px">Blog</font></a>
</div>
</td>

<td width="5%">
<div align="center"><img src="Photos/Home/babytitle.jpg"
width="45" height="45" title="Qi Lin" border="2" alt=""/></div>
</td>

<td width="10%">
<div align="center" onmouseover=
"MM_showHideLayers('qilin','','show')" onmouseout=
"MM_showHideLayers('qilin','','hide')">
<a href="qilin_about_me.php"><font face="elephant"
size="4px">Qi Lin</font></a>
</div>
</td>

<td width="5%">
<div align="center"><img src="Photos/Home/metitle.jpg"
width="45" height="45" title="Luke" border="2" alt=""/></div>
</td>

<td width="10%">
<div align="center" onmouseover=
"MM_showHideLayers('luke','','show')" onmouseout=
"MM_showHideLayers('luke','','hide')">
<a href="luke_about_me.php"><font face="elephant"
size="4px">Luke</font></a>
</div>
</td>

<td width="5%">
<div align="center"><img src="Photos/Home/youtitle.jpg"
width="45" height="45" title="Hua" border="2" alt=""/></div>
</td>

<td width="10%">
<div align="center" onmouseover=
"MM_showHideLayers('hua','','show')" onmouseout=
"MM_showHideLayers('hua','','hide')">
<a href="hua_about_me.php"><font face="elephant"
size="4px">Hua</font></a>
</div>
</td>

<td width="5%">
<div align="center"><img src="Photos/Home/gbook.jpg"
width="45" height="45" title="Guest Book" border=
"2" alt=""/></div>
</td>

<td width="10%">
<div align="center">
<a href="guestbook/index.php"><font face="elephant"
size="4px">Guest Book</font></a>
</div>
</td>

<td width="12%"></td>
</tr>

<tr>
<td>
<div id="blog" style=
"position:absolute; width:180px; height:0px; z-index:1; visibility: hidden;"
onmouseout="MM_showHideLayers('blog','','hide')"
onmouseover="MM_showHideLayers('blog','','show')">
<table width="100%" border="0" cellpadding="2"
cellspacing="1" bgcolor="#FFFFFF" class="be"><tbody><tr><td></td></tr></tbody>
</table>
</div>
</td>

<td></td>

<td></td>

<td></td>

<td>
<div id="qilin" style=
"position:absolute; width:220px; height:85px; z-index:1; visibility: hidden;"
onmouseout="MM_showHideLayers('qilin','','hide')"
onmouseover="MM_showHideLayers('qilin','','show')" >
<table width="100%" border="0" cellpadding="2"
cellspacing="1" bgcolor="#FFFFFF" class="be">
<tbody>
<tr>
<td bgcolor="#DE0018" onmouseover=
"this.style.background='#990000'" onmouseout=
"this.style.background='#DE0018'">&nbsp; <a href=
"qilin_about_me.php" class='nav'><font color=
"#FFFFFF" face="elephant" size=
"4px">About Me</font></a></td>
</tr>

<tr>
<td bgcolor="#DE0018" onmouseover=
"this.style.background='#990000'" onmouseout=
"this.style.background='#DE0018'">&nbsp; <a href=
"qilin_milestones.php" class='nav'><font color=
"#FFFFFF" face="elephant" size=
"4px">Milestones</font></a></td>
</tr>

<tr>
<td bgcolor="#DE0018" onmouseover=
"this.style.background='#990000'" onmouseout=
"this.style.background='#DE0018'">&nbsp; <a href=
"qilin_monthly_photos.php" class=
'nav'><font color="#FFFFFF" face=
"elephant" size="4px">Monthly
Photos</font></a></td>
</tr>

<tr>
<td bgcolor="#DE0018" onmouseover=
"this.style.background='#990000'" onmouseout=
"this.style.background='#DE0018'">&nbsp; <a href=
"qilin_pregnancy.php" class='nav'><font color=
"#FFFFFF" face="elephant" size=
"4px">Pregnancy</font></a></td>
</tr>

<tr>
<td bgcolor="#DE0018" onmouseover=
"this.style.background='#990000'" onmouseout=
"this.style.background='#DE0018'">&nbsp; <a href=
"qilin_the_legend.php" class='nav'><font color=
"#FFFFFF" face="elephant" size=
"4px">The Legend of Qi Lin</font></a></td>
</tr>
</tbody>
</table>
</div>
</td>

<td></td>

<td>
<div id="luke" style=
"position:absolute; width:180px; height:68px; z-index:1; visibility: hidden;"
onmouseout="MM_showHideLayers('luke','','hide')"
onmouseover="MM_showHideLayers('luke','','show')">
<table width="100%" border="0" cellpadding="2"
cellspacing="1" bgcolor="#FFFFFF" class="be">
<tbody>
<tr>
<td bgcolor="#DE0018" onmouseover=
"this.style.background='#990000'" onmouseout=
"this.style.background='#DE0018'">&nbsp; <a href=
"luke_about_me.php" class='nav'><font color=
"#FFFFFF" face="elephant" size=
"4px">About Me</font></a></td>
</tr>

<tr>
<td bgcolor="#DE0018" onmouseover=
"this.style.background='#990000'" onmouseout=
"this.style.background='#DE0018'">&nbsp; <a href=
"luke_resume.php" class='nav'><font color=
"#FFFFFF" face="elephant" size=
"4px">Resume</font></a></td>
</tr>

<tr>
<td bgcolor="#DE0018" onmouseover=
"this.style.background='#990000'" onmouseout=
"this.style.background='#DE0018'">&nbsp; <a href=
"luke_photos.php" class='nav'><font color=
"#FFFFFF" face="elephant" size=
"4px">Photos</font></a></td>
</tr>

<tr>
<td bgcolor="#DE0018" onmouseover=
"this.style.background='#990000'" onmouseout=
"this.style.background='#DE0018'">&nbsp; <a href=
"luke_lesson_plans.php" class='nav'><font color=
"#FFFFFF" face="elephant" size=
"4px">Lesson Plans</font></a></td>
</tr>
</tbody>
</table>
</div>
</td>

<td></td>

<td>
<div id="hua" style=
"position:absolute; width:180px; height:51px; z-index:1; visibility: hidden;"
onmouseout="MM_showHideLayers('hua','','hide')"
onmouseover="MM_showHideLayers('hua','','show')">
<table width="100%" border="0" cellpadding="2"
cellspacing="1" bgcolor="#FFFFFF" class="be">
<tbody>
<tr>
<td bgcolor="#DE0018" onmouseover=
"this.style.background='#990000'" onmouseout=
"this.style.background='#DE0018'">&nbsp; <a href=
"hua_about_me.php" class='nav'><font color=
"#FFFFFF" face="elephant" size=
"4px">About Me</font></a></td>
</tr>

<tr>
<td bgcolor="#DE0018" onmouseover=
"this.style.background='#990000'" onmouseout=
"this.style.background='#DE0018'">&nbsp; <a href=
"hua_resume.php" class='nav'><font color=
"#FFFFFF" face="elephant" size=
"4px">Resume</font></a></td>
</tr>

<tr>
<td bgcolor="#DE0018" onmouseover=
"this.style.background='#990000'" onmouseout=
"this.style.background='#DE0018'">&nbsp; <a href=
"hua_photos.php" class='nav'><font color=
"#FFFFFF" face="elephant" size=
"4px">Photos</font></a></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>

The main goal of XHTML is to divide “structure” from “style” and if I see your new code, I think you have wrong understand this.
For example, you make totally wrong use of your tables, tables aren’t designed for making a layout … My recommendation is to read some articles about designing a web site with XHTML and CSS using div’s, but … it will went you through a lot more (real) pain!

If you really want to change your old code into “your new one”, you should post your full “new code”, because, if I just replace the old part with the new part in your existing site code, it isn’t 100% ok, but your menu is working rather fine (in FF and IE7 ) … the only not proper thing I see is a white strike when you go over your blog link, but that’s solvable by deleting

onmouseover="MM_showHideLayers('blog','','show')" onmouseout=
  "MM_showHideLayers('blog','','hide')"

But again, … if you really want a XHTML 1.0 site, you should learn a bit about divs and CSS.

Thanks for replying bas. Yeah, I am becoming more and more aware of the need to learn more, but this is my first site and I just wanna sort it out before I move on. The new code for me doesn't work because it doesn't allow my cursor to move from the main menu down the list onto the sub menu. The difference between the new and old code is this,

Old
<td width=10%
<div align=center
onMouseOver="MM_showHideLayers('qilin','','show')" onMouseOut="MM_showHideLayers('qilin','','hide')">
<a href="qilin_about_me.php"><font face="elephant"
font size="4px">Qi Lin</font></a>
</td>

New
<td width="10%">
<div align="center"
onmouseover="MM_showHideLayers('qilin','','show')"
onmouseout="MM_showHideLayers('qilin','','hide')">
<a href="qilin_about_me.php"><font face="elephant"
size="4px">Qi Lin</font></a>
</div>
</td>

The differences being the closure of brackets around td and div, the center being in "", font size replaced with size, and the final closing /div.
The thing which seems to make it work is the absense of closing the brackets, but this would never pass xhtml standards. Hence my problem.
Thanks for your help so far, more help would be great!

Can you please tell in which browser the problem appears? Than I can try to reproduce it and possibly help you.

Sure, I have tried this in Firefox and Internet Explorer, both the same. Can't move from main menu to sub menu. As I move off the main menu (moving down of course), the sub menu disappears.

I gave it a closer look and know I have seen the problem.

The problem is that the menu bar (not the buttons themselves !) raise in height because of the images placed in the main bar, so when you leave your cursor from the “main” button, you really leave (without being immediately on the submenu) the main button, so the sub menu has time to close.

What you have to do is removing that space, you can by:

1. Making your submenu appears a little bit higher
2. By enlarging you’re a-elements.

So, for example:

<td width="10%">
<div align="center" onmouseover=
"MM_showHideLayers('qilin','','show')" onmouseout=
"MM_showHideLayers('qilin','','hide')">
<a href="qilin_about_me.php" style="display:block;height:50px;line-height:50px;"><font face="elephant"
size="4px">Qi Lin</font></a>
</div>
</td>

display: block;

this makes a block-element from your link (without you can't give it a height)

height:50px;

this wil give your link a height

line-height:50px;

Wit this your main-button tekst is centered again (otherwise it would be standing in top of the main bar)

If you do this with all your main buttons, your menu should work again.

Play a little bit with it to get the best result.

Incredible, thanks loads bas, that was great. You did it perfectly, mucho thanko! I will take your advice and invest some study time in divs and css, but for now you have made me very grateful. Thanks again!