javascript menu appears behind form elements

[kapow]

I am using a javascript menu with submenus that drop down on mouseover.

When I mouseover menu items the sub-menus appear behind items on a form e.g. the go behind a select-option-list.

Does anyone know why this happens / how to stop it?
I have tried using z-index in my css file to put the javascript above but this doesn't work.

[Alternative Future]

Hi kapow,

The select control is a windowed control/element (controlled by the browser and OS) other more manageable controls are windowless.

• Windowed controls have an infinite z-index, that prevents them being hidden.

Ways to overcome this are:
Microsoft Forms Control Box

Used mainly in Visual Basic and accepted throughout applications (IE)

Faults
Will not work in Netscape

[Example of]
<object classid="clsid:8BD21D30-EC42-11CE-9E0D-00AA006002F3" id="combo" name="combo" class="largecombo" height="20">
<param name="DisplayStyle" value="7"><!--VERY IMPORTANT - Use this setting to turn user input off. When this is set to 7 , It behaves like a select box. Remember it is after all a combo( combination between a text and list box) box -->
<param name="ShowDropButtonWhen" value="2"><!--The button on the side need not be visible all the time - you can customize it here-->
<param name="FontName" value="Arial">
<param name="FontHeight" value="180">
</object>
[End Example]

Apart from that there is no other way of beating it! Check out MS what they have done is hide the conflicting select/combo box from view whilst the navigation element is hitting it.

HTH,

-George

[jetboy_70]

It isn't something you have control over. Form elements appear over everything, that's just the way it is. The reason it happens is due to form elements being 'windowed elements' which are displayed above anything else by default.

Your only workaround is to move your design around so there is no overlap, or hide the form element using CSS when your menu drops down. Obviously this latter option looks a lot cleaner if the whole element is covered.

[kapow]

Wow! Been making websites for 5 years, I didn't know form elements did that.

hide the form element using CSS when your menu drops down

How would I do that?
- I'm a bit nervous about adding code to the javascript as its a 20k external file created by a program I bought to make fancy menus.
- Can I hide the form element via code in the html or the css?

[jetboy_70]

"Can I hide the form element via code in the html or the css?"

That depends on the way your menus are set up. You need to isolate the Javascript event that triggers the menu to roll down (an onMouseover from the sound of things) and attach something like:

myformelement.style.visibility=='hidden'

to it.

My Javascript ability relies on trial and error a little too much, but maybe a seasoned Javascript guru can step in and elaborate or provide an example.

[Alternative Future]

It should be a simple enough process as your external .JS file will be doing a lot of it at present, if you can locate your mouseover event and then within that condition add the hide function if you want you can sticky me the URL of the .JS file and I can have a look for the actual event.

Going to bed now so this will be tomorrow morning UK time...

-George