Michael Brandon

Michael,

It is possible, but it is a bit messy in Opera 7.

Sorry, I cannot see any menu item 'man', but I do see what you mean (after a quick edit).

You need to remove the IE specific comments from makemenu.css.
in makemenu.css;
change the display to inline in:
ul.makeMenu li a { ... display: block; ... }
and add the following line:
ul.makeMenu li > a { display: block; }

however, now that sub menu does not appear in Opera 7 ... let me think ...

this is an Opera bug. When li:hover and a:hover are both true, li:hover > ul
is not activated for some unknown reason. adding padding to the li will
help, but it is not perfect. If you move the mouse too fast, it will not
open/close properly.
padding: 1px 0px 1px 0px;

There are also a couple of bugs you are going to run into:
The menus do not work in IE5.0, but they do work in IE5.5 (IE5.0
positioning bug)
The 'consulting services' sub menu does not appear in Mozilla, Opera 7 or
Safari because you have put a </li> tag in too early:
	<li>Consulting Services</li> <-- that </li> should not be there
		<ul>
			... etc.
The sub menus need to be pushed 1px further to the left or they will not
work in Opera 7


Does all of this make sense?


Tarquin

You may find that you are better off using JavaScript and a display based
list menu. This can be done using plain HTML, which you style with CSS,
then control with JavaScript. The beauty of this is that it is pure HTML,
not HTML written with JavaScript, so it will be googled, as well as being
visible in ALL browsers, no matter what they support (provided you write it
to collapse _after_ the page has loaded, not by sniffing as they have done
on DynamicDrive).

The showing/hiding will work in IE4+, Opera 7+, iCab, Konqueror, Safari,
Mozilla etc.
Netscape 4, OmniWeb 4.2-, Escape, Clue, Opera 6- etc will show the menu
fully expanded.

I have attached an example using UL and LI tags, but you could use any tags
you want, so if necessary, you could use CSS positioning on div elements
etc. If necessary, you can also make unused sub menus automatically
collapse. Say if you want that, I will rewrite the script for you.

OK, what kind of auto hiding do you want? one that auto hides sibling
levels when a new level is opened, and/or one that auto hides if they stop
using the menu for 'n' seconds?

If you want to add mouseover support ONLY WITH NESTED LISTS, just put a span
around the list item <ul>
	<li><span on... on...>hello</span>
		<ul>
			etc.
and make the span detect onmouseover and onmouseout events
onmouseover="toggleDis('lev2');" onmouseout="toggleDis('lev2');"

I warn you that you need to be careful using mouseovers. Some browsers
cannot use them (such as TV browsers . . .) because they have no mouse. For
that reason, I think you should have the plus symbol.

Also, there are issues when using mouseovers with nested lists: as a list
expands, it changes what was under the mouse, triggering further
mouseovers/outs, creating a very bad effect. If you want to use mouseovers,
you should use positioning to make the layout look good again, but remember
that then it will not work in Netscape 4 or equivalent browsers, and if you
position ULs or LIs, you will hit that IE 5.0 bug again.

If you want Netscape 4 support, you can manually create normal menus, but
use styled div elements, and change visibility instead of display (this is
all sounding a bit complicated isn't it?!). Sorry, I really don't have the
time to implement this properly, but you may be interested in my multi level
show hide menu
http://www.howtocreate.co.uk/tutorials/jsexamples/showhide.html
which works properly already, but does not close as neatly as I would like.

I think you would be better off with a plus symbol, but it is your choice.


Anyway, I have attached an updated script to do the auto collapsing - which
should not be used with mouseovers if you use nested lists.


Tarquin