Trouble with CSS Drop Down Menus

Please help!
I have a page, at http://phil.frihost.net/page/page.htm .
I'm trying to make a CSS drop down menu beneath the header.
The problem is I want to have 2 levels of sub menus, and I can't get the second level of menus to work properly. If you mouseover the choices you'll see what I mean.
I've looked up a couple of tutorials, but I can't seem to get it to work right.
Can someone please point me in the right direction or show me what I'm doing wrong??

Take a look at my article on CSS menus http://www.justsoftwaresolutions.co.uk/articles/css_menus.html --- the submenus created there have multiple levels. There is a sample menu at http://www.justsoftwaresolutions.co.uk/articles/sample_menu.html where you can see it in action.

[ul]

Anthony,
First of all, thanks for the reply and the help. I used your tutorial and I have the second menu coming up now. Problem is, no matter what I do I have no control over the second menu. It seems whatever I plugin for the ul positioning effects both menus. I tried the tips you gave on your page to make the sub-sub menus appear to the right, but all it does is throw everything out of whack. I've tried to position the ul ul, li ul li, ul ul li but nothing seems to make a difference.

Also, I noticed in your code a couple of declarations I'm not familiar with.

What does --
.navmenu + *
{
  clear: left;
}
and
.navmenu li:hover > ul
{
  display: block;
}
and
.navmenu ul.parent_hover
{
  display: block;
}

do?

[.navmenu + * { clear: left; }]

First, the easy bit:

What does -- .navmenu + * { clear: left; } and .navmenu li:hover > ul { display: block; } and .navmenu ul.parent_hover { display: block; } do?

".navmenu + *" selects any element (*) that is the next sibling (+) of a an element with the .navmenu class. This ensures that the text following the menu appears under it. This is because I use "float: left" as part of the top-level menu style.

".navmenu li:hover > ul" selects the UL element that is the immediate child of a LI element that has the mouse hovered over it, but only if the LI is under a .navmenu element somewhere. This is what makes only the immediate submenu pop out, rather than the sub-sub menu.

".navmenu ul.parent_hover" does the same, but in IE (which doesn't support LI:Hover), where the .parent_hover class is applied by the DHTML behaviour javascript.

Next, the more complicated bit. The "navmenu" style is designed to be applied to the top-level UL, not the containing DIV. Then, you can add the

.navmenu ul { display: none; }

style back in, which then hides all the submenus unless they are explicitly made visible by the other styles. It also affects where you are in the tree:

.navmenu => the top-level UL
.navmenu UL => any sub menu (whatever level)
.navmenu UL UL => a 2nd-level (or higher) sub-menu

I suggest that you put the "navmenu" class on the top-level UL element in the menu, and copy my stylesheet verbatim. You can then adjust the colours and display options as you feel is appropriate.

I suggest that you put the "navmenu" class on the top-level UL element in the menu, and copy my stylesheet verbatim. You can then adjust the colours and display options as you feel is appropriate.

OK, that seems to work --- in Firefox. Tell me, where does the ie_menus.htc file go? Can it just go in the same directory as the css file?

Tell me, what is the difference between styling the UL and the DIV? Aren't both containing elements?

You can put the class anywhere you like --- on the UL or the DIV, or somewhere else entirely --- but you need to ensure that your CSS selection rules are done to take that into account. The rules in my stylesheet are based on the navmenu class being on the outermost UL, so if you put the class on any other element, you'll need to adjust the rules to compensate.

The DHTML behaviour file is loaded from http://www.justsoftwaresolutions.co.uk/articles/sample_menu.html by the following code

Code:

<!--[if gte IE 5]>
<style type="text/css">
.navmenu li
{
    float: left;
    width: 8em;
    behavior: url( ie_menus.htc );
}
</style>
<![endif]-->

which means that ie_menus.htc needs to be in the same directory as the HTML file. You can change the URL in the "behavior" style to anywhere you like.

Anthony,
First off, thanks for taking the time to explain some things to me.

I have (as far as I can tell) copied your HTML code and CSS code verbatim (copy and paste).
It looks fine in Firefox, like I said, but in Explorer, something just isn't right.
In FF, the first sub menu (I assume #navmenu ul, or is it #navmenu ul ul?) appears below menubar (#navmenu li?). This would work fine.
But in IE, it floats out to the right, covering the following element. I have tried, for the last 2 days to get it to appear below the menubar, but nothing works.
I have my latest efforts on the example page, http://phil.frihost.net/page/page.htm .
I've even included the code from the menu example you give in your tutorial. It pretty much does the same thing.
If you wouldn't mind, please check it out and tell me what I'm doing wrong.
Thanks again.

Firstly, you need to put <span> elements around the non-link menu entries in order to give them block formatting, and make the menu work OK.

Secondly, in IE7, if you specify the System identifier in the DOCTYPE ("http://www.w3.org/TR/html4/loose.dtd ") (which is missing from sample_menu.html) then you get "extra standards mode", which means that it handles the

Code:

.navmenu li {float:left}

style just as Firefox would, and gives horizontal menus. Unfortunately, their "extra standards mode" doesn't work quite the same as FF, so you still need the HTML behaviours. However, now the

Code:

.navmenu li {width:10em}

stuff also causes problems.

So, you need two conditional comments: one for GTE IE 5 and LT IE 7 (which has the float:left and width: 10em stuff as well as the behavior stuff), and one for GTE IE 7 with just the behavior stuff. I haven't tried IE 8 yet.

Isn't handling IE fun?

[G]

Thanks again.
I'll have to wait until I get home from work to make the changes you suggested.

Secondly, in IE7, if you specify the System identifier in the DOCTYPE ("http://www.w3.org/TR/html4/loose.dtd ") (which is missing from sample_menu.html) then you get "extra standards mode", which means that it handles the
Code:
.navmenu li {float:left}style just as Firefox would, and gives horizontal menus. Unfortunately, their "extra standards mode" doesn't work quite the same as FF, so you still need the HTML behaviours. However, now the
Code:
.navmenu li {width:10em}stuff also causes problems.

I just realized that I omitted the behaviors link, I guess that would be a problem, huh? 
As far as DOCTYPE's go, I really need to get up to speed on them.

So, you need two conditional comments: one for GTE IE 5 and LT IE 7 (which has the float:left and width: 10em stuff as well as the behavior stuff), and one for GTE IE 7 with just the behavior stuff.

OK, I just read up a little on conditional comments. I'm a little confused as to why both comments are needed.
Wouldn't Greater Than or Equal to IE 5 be enough?

[G]

So, you need two conditional comments: one for GTE IE 5 and LT IE 7 (which has the float:left and width: 10em stuff as well as the behavior stuff), and one for GTE IE 7 with just the behavior stuff.

OK, I just read up a little on conditional comments. I'm a little confused as to why both comments are needed. Wouldn't Greater Than or Equal to IE 5 be enough?

With the full doctype, the behaviour in IE 5+6 is different to IE7. In IE5+6, you still need the float:left and width:10em styles. In IE7 (with system ID in doctype) you don't want those, as they'll then cause all your submenus to become horizontal. You therefore need different IE-specific styles for IE5+6 compared to IE7.

Of course, if you omit the system ID from the doctype, IE7 behaves much like IE6 (it's supposed to, for backwards compatibility), so you can make do with only one conditional comment.

I dread to think what IE8 will do with this stuff, given the standards mode/no standards mode flip-flopping.

Thanks Anthony.
It seems to be working fine.
I still need to go slow to figure what is going on, but you have helped me out tremendously. Now I have a little bit of an idea about what is going on.
Thanks again!

[Guest]

[35.594]

Googlebot, Yahoo crawler, Gigabot