I've been having problems with my drop down navigation in IE 7. I am sooooooo close now. Just one small problem. When I mouse over the images in IE 7 the drop down appears just fine but when I try to mouse to a link the navigation immediately disappears. This doesn't happen in Firefox though. Can anyone look at my code and help me find the problem. Thanks.

http://www.classicengraving.org/New%.../layoutv9.html

Before you can acces the 'drop-down menu' you leave the a:hover-zone, and so the menu is closed ...
This is something caused by a little spacing between the button and the drop down menu in IE, nothing visible, but just 1 or 2 pixels that aren't in the a:hover-zone. Probably caused by a margin.

The solution should be finding and removing the spacing.

This code (place it at the end of your CSS) will stop disappearing in IE7, it's not a solution, but maybe it's a help to find some.

#qm0 ul li{
margin-top:-4px !important;
}

First of all, you are improperly repeating ID's in your code:

<ul id="qm0" class="qmmc">

ID's MUST be unique, they cannot be repeated on a page. If you want to repeat it's usage, make it a class instead.

You have not defined any styling for that table (ack!) at all, you need to be sure you close up ALL the spaces between cells in the CSS AND in the html. You don't want ANY spaces, so the table cells will will have to run together ie:
<td></td><td></td> etc. .. same goes for <tr>s.

There's no reason to be using a TABLE for layout there either.

That !important hack is just not necessary.

Ok, I've sort of figured out my problem. It has to do with the cell padding. This is the strangest, most mind boggling thing to me...although I am certainly by no means an expert @ HTML, CSS & Java. Anyway, when I change the cell padding to 1 in this code:

/*"""""""" (MAIN) Items""""""""*/
#qm0 a
{
padding:0px 1px 0px 0px;
background-color:#666666;
color:#FFFFFF;
font-family:Arial;
font-size:12px;
text-decoration:none;
}

Then the navigation stays when you hover over the links in IE 7. However, in Firefox it does the same thing except it has messed up the right side of one of my images. Also, it does add the 1 pixel to my buttons which doesn't look so good. Is there a way I can get the navigation to stay when hovering over the links & display my buttons and right side bar correctly? Please forgive me for being such a pain but I'm new to all of this coding.

Thanks.

Yay, I figured it out, it just needed to be set to -1.

One thing too, that I have done is to edit all of my code to play in Firefox, validate it, both HTML and CSS, then add browser-specific CSS for IE, by inserting conditional comments into your HTML to add a style sheet targeting the needs of Microsoft's inept browser technology.

Do a Google search for css conditional comments. IE style sheets will not be loaded by other browsers, and if loaded into IE after the main CSS, will overwrite the mail CSS where needed to make IE do it right.