Looking for help on buggy html/css for multilevel menu, see link

[Andrew Slaughte]

I'm trying to expand my link system to do have multiple levels. The OAHU menu works but if you hover the mouse under "north shore" it freaks out.

Some of my coding is probably all screwed up.

thanks for the help

See link. CSS is pasted into bottom of page code. Please disregard the lengthy header code.

https://www.surfnsol.com/menu.html

It seems to work in IE, but its does the freak out thing in Firfox and Chrome

[drhowarddrfine]

If it works in IE, but not other browsers, then your markup is wrong. Don't use IE as a reference for anything.

Your doctype is incorrect. Validate your HTML for that list of errors.

[Andrew Slaughte]

ok, the document type is fixed, though its been like that forever. I don't usually reference IE for anything, it was sort of an fyi.

What do you mean "my markup is wrong"? yes the code is wrong.

I suppose you mean going to a validation site. there are like 3 errors, none of which pertain to the menu. validator.w3.or g

[drhowarddrfine]

If the doctype is wrong then browsers go into 'quirks mode' and you don't want to be there.

"Markup" is what HTML and CSS is. When you refer to "code" we mean as in a programming language, mostly not to confuse people when talking about the two. HTML and CSS are not programming languages.

Unless you did something else, notice you have no HTML or CSS errors anymore since changing the doctype. Also, I don't see anything wrong with the drop down "North Shore" anymore.

[Andrew Slaughte]

thanks,

I don't think validation is the answer to everything. The same issue I described in the first question still exists.

If you hover the mouse under the Oahu menu (under the words "North Shore") the menu does not disappear. It flickers the two sub menus instead in a buggy sort of way.

I just think there are some issues in the css and was hoping someone who knew this stuff could scan the code and clean it up a little.

The css for the menu bar is inactive at the end of the menu.html code after </html>

thanks

[drhowarddrfine]

Validation is error checking. You shouldn't have errors in your markup anymore than you would if you entered a formula into a calculator. More problems are fixed just by writing valid markup.

I didn't see any flickering in FF or Chrome when I last viewed it.

[Andrew Slaughte]

The menu is still glitchy on two of my computers.

If someone who knows some html/css has a few minutes to look into my css at the end of www.surfnsol.com/menu.html I would really appreciate it.

Its probably in one of the "hover" lines, maybe an issue with all those ul's and li's....i dont understand those very well:



#menuHolder ul li:hover {position:relat ive;}
#menuHolder ul li a:hover {border:0px; position:relati ve;}


#menuHolder ul a:hover ul {left:-5px; top:30px; padding-left:10px; border:none; border-top:0;}
#menuHolder ul li:hover ul {left:-5px; top:30px; padding-left:10px; border:none; border-top:0;}

#menuHolder ul :hover ul li {padding:0; float:left; height:20px; margin-top:6px;}

[JKing]

Do some good olde fashioned debugging. Start by isolating where the issue is. You can do this by commenting out lines of your css until you find the one that is triggering the issue. Once you have isolated the issue you can then move onto fixing it.

Alternatively changing the background color or adding a border to a specific element can also help you pin point exactly which element is causing you grief.

When you hover on the very bottom of the menu I noticed that when the issue happens the cursor isn't the hand icon but a pointer which leads me to believe it is likely a rule set on an <li> or <ul> as opposed to the <a>.