CSS Menu Bar Problems-Help!

[danielc1234]

Hi. I have a CSS menu bar that is having a problem. What is happening is, if you hover over the menu bar, then the side menu comes out, then the third level comes out. If your not quick enough, the menu bar goes away. I know it's a setting somewhere, but I dont know CSS well enough to figure it out.
This is my site if someone might be able to take a look at it.

www.precious-pets-paradise.com

An exact sample would be...
Goto 'Dogs' on the tab
then pull down to 'Beds'
then to the right for 'All Dog Beds'
You will see that if your not careful or not quick enough, the menu bar disapears.

Any help would be greatful.
Thanks
Daniel

[Dan Schulz]

Hey Dan, welcome to Sitepoint. The only browser I noticed this problem in was FireFox. I tested your page in Internet Explorer 6, Internet Explorer 7 (which is now available to the public as a "final" release), Mozilla FireFox 1.0.3, and Opera 9.

The first thing I did was check your HTML and CSS for errors. This is what the HTML validator turned up (that's relevant to the problem at hand):

# Error Line 98 column 228: ID "HomeCenter" already defined.

...th="244" height="300" border="0" id="HomeCenter" /></div></td>

An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element).

✉
# Info Line 53 column 249: ID "HomeCenter" first defined here.

...th="287" height="300" border="0" id="HomeCenter" /></div></td>

# Error Line 254 column 8: end tag for element "li" which is not open.

</li>

The Validator found an end tag for the above element, but that element is not currently open. This is often caused by a leftover end tag from an element that was removed during editing, or by an implicitly closed element (if you have an error related to an element being used where it is not allowed, this is almost certainly the case). In the latter case this error will disappear as soon as you fix the original problem.

If this error occured in a script section of your document, you should probably read this FAQ entry.

Ok, what this means is you have more than one unique ID using the same ID name. Just like you can't have more than one person with the same US Social Security number, you can't have more than one ID name in your Web page. If you want to use the same ID name more than once in your Web page, you have to change ID to class. You also have an extra </li> tag in your list menu. At the very bottom of the menu, just before the main </ul> tag, you have </li> </li>. You can safely remove the second one.
And the CSS:

Line: 147 Context : #nav, #nav ul

Invalid number : line-height Parse Error - [empty string]

You need to add a unit to your value for line-height:

#nav, #nav ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;
}

should be

#nav, #nav ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1px; /* px is an example in this case; please remove this comment from the code when you fix your stylesheet if you copy and paste this */
}

I guess what I'm saying is you need to validate your code. Use the HTML and CSS validators over at the W3C Web site. Fix your errors, and clean up any CSS warnings you may come across (I recommend cleanng up warnings because it'll often result in cleaner code, and you won't have to scroll down as far when you validate your stylesheet ).

If those changes don't work, let me know and I'll take a deeper look into it, ok?