Need help with fly out navigation item Options

[philwinter]

I haven't done much in CSS for some time, and I'm struggling over something simple. I'm trying to get a fly-out menu to work, but I can't get it to appear. When you hover over "Subsidiaries", the drop down works fine. But when you over over "Gemma" the fly out with two menu options does not appear. I've attached the HTML and the CSS. The CSS has no errors, but there are a few errors in the HTML which, to me at least, are indecipherable and make no sense. Thanks for any assistance.  index_test.html ( 2.73k ) Number of downloads: 291
 argan2_css.css ( 3.85k ) Number of downloads: 304

[pandy]

Yeah, you get this error

CODE

Error: element BODY not allowed here; check which elements this element may be contained within

because you haven't closed HEAD, so BODY is actually contained in HEAD, where it isn't allowed to be. You also lack TITLE that is a required element.


When you have fixed that you will get other errors. Your lists are messed up and that can very well be the reason for the menu not working. After the first list you have an unmatched closing tag for LI. Remove it. Then you start off the second list with a LI. Can't do that. All LIs must be inside UL.

Well, it goes on like that. Correct the first error with BODY and add a TITLE and the validator will give you more useful hints about the problems with the lists. Ask again if there's something you don't understand.

[philwinter]

Yeah, you get this error

CODE

Error: element BODY not allowed here; check which elements this element may be contained within

because you haven't closed HEAD, so BODY is actually contained in HEAD, where it isn't allowed to be. You also lack TITLE that is a required element.


When you have fixed that you will get other errors. Your lists are messed up and that can very well be the reason for the menu not working. After the first list you have an unmatched closing tag for LI. Remove it. Then you start off the second list with a LI. Can't do that. All LIs must be inside UL.

Well, it goes on like that. Correct the first error with BODY and add a TITLE and the validator will give you more useful hints about the problems with the lists. Ask again if there's something you don't understand.

Hi Pandy, Thanks for your help. I've eliminated all the HTML errors so the HTML and CSS validate cleanly. I've checked and rechecked the navigation markup, fixed the unclosed <li>, and all <ul> and <li> tags have a corresponding close. Yet the fly out still does not appear. I'm following an example in "Stylin' with CSS", but there's obviously something I'm missing. I've attached the updated CSS and HTML.
 argan2_css.css ( 3.85k ) Number of downloads: 299
 index_test.html ( 3.08k ) Number of downloads: 289

[philwinter]

An Update: I have gotten the fly out menu to appear when I hover over "Gemma Power" the way it should. But there are still two problems that I can't figure out. (1) When I try to select one of the menu items in the fly out, the fly out disappears. (2) the fly out appears about in line with "Atlantic Projects," not inline with "Gemma Power" as it should. Thanks for your help. I have attached updated CSS and HTML.

 argan2_css.css ( 3.97k ) Number of downloads: 305
 index_test.html ( 3.1k ) Number of downloads: 297

[pandy]

(1) I think it's because the sub menu is too far out. When you move the mouse pointer over it you get outside the parent li, so that is no longer hovered and the sub menu becomes hidden again. If you decrease the margin you've added to the UL for the sub menu to about 15 pixels it starts to work. You still need to keep your tongue straight though so you don't get outside the hover area with the mouse pointer and that's often a problem with this kind of menus.

[philwinter]

I got it working! The positioning of the ul was the problem. When I move the fly out ul up beside its parent, it worked perfectly. Thanks, Pandy, for all your help.