Splitter prevents/hides Drop-Down Menu …

[mtbvfrMember]

Hi,

I have added a <div>, containing a Drop-Down Menu, above the Splitter Widget and I have wrapped the Splitter Widget inside another <div>, which probably isn’t necessary, but my Drop-Down Menu is being hidden, I think, by the Top Splitter Panel.

I think it is something to do with a CSS Position attribute somewhere, but I haven’t been able to determine what to change.

If I remove the widget then my Drop-Down Menu functions correctly.

The following page will demonstrate the problem.

Horizontal Splitter Demo

Thanks, Michael.

[Peter StoevKeymaster]

Hi,

You need to set z-index to your nav ul, because it is lower that the Splitter’s z-index.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[mtbvfrMember]

Hi again Peter,

I couldn’t find any z-index attributes being set for the Splitter

<div>

s when inspecting with Firefox.

So, I first tried “z-index:100” for “nav ul” which worked and then I tried “z-index:1” which also worked which I think conforms that the z-index attribute is not being used in any of the Classes used for the Splitter

<div>

s.

It’s probably something to do with “position:absolute” being used but I’m not sufficiently skilled with CSS yet to determine where such changes would need to be made without requiring the use of “z-index”.

I have some other pages using the same menu without z-index being used.

Thanks, Michael.

[mtbvfrMember]

Can I only edit a reply once?

[Peter StoevKeymaster]

Hi,

It is not related to position: absolte. Every HTML Element has Z-Index. It is automatically set by the browser unless you set it in the Style. If you add 2 DIV tags to a web page, the second DIV tag will be with higher Z-Index. If you are building Custom Menu’s it is necessary to set the Z-Index of your Popups.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts