JavaScript DropDown is hidden behind div

HTML & CSS
1

Hi Everyone,

First of all, the file in question is located here: http://daniellaytonwright.net/template/Test%20Template/index2.html

I have a website template that may have to support a lot of links in a horizontal navigation bar that I wrote a little javascript (it’s not perfect, there are a few bugs) to make sure that the navigation didn’t overflow the bar. To do this I put the extra items in a dropdown titled “More” at the far right. So to view the problem you might have to resize your browser to be smaller and then the “More” item will appear. When I rollover it, the <ul> fades in and shows the extra items. However, they are hidden behind a div. Please help and thank you very much.

Sincerely,
Daniel Wright

2

Hi,

As Mark said you will need to add positin:relative to make z-index take effect and for IE you need to address hemain parent as follows.


#all-navigation{
    width:100&#37;;
    position:relative;
    z-index:99;/* must be higher than #content z-index (if applied)*/
}

You have some sort of script error in IE so check your JS or ask for help in the JS forum.:wink:

3

Hi Daniel,

z-index will only work with a position other than the default value ‘static’, so you’ll need to make the drop down position: relative or absolute.
Though I suspect IE will throw a few curve balls at you as it has a few nasty z-index bugs.

May the force be with you.