SOS. JSK CSS Horiz List Menu upper menu Dropdown OK Firefox, lost in IE

Using neat CSS Horizontal List Menu from JavaScript Kit sourced here -
http://www.javascriptkit.com/script/script2/csstopmenu.shtml
on my website here - http://bioenergy.timleitch.net.nz/index.html

The JKS page has both original .css (and .js) files click link visible.

PROBLEM IS -
I have just expanded to 2 main menus to accomodate the expanding amount of info I have available about the adverse health effects of EMFs and electropollution. This works fine in Firefox but in not in IE Internet Explorer. Perhaps "Holly Hack" isn't right or needs something more.

With IE, the properly displaying DropDown for the upper layer menu disappears when mouse is brought down (what should be the dropdown display in order to click on a DD item) and goes over the lower layer menu. This means the Lower Menu works fine in all respect but Upper Menu is value is lost and largely ineffective.

Two or more Menus are allowed in javascript file

The original JKS .js file says 2 or more menus are possible in this code -
http://www.javascriptkit.com/script/script2/csshorizontalmenu.js

var cssmenuids=["cssmenu1"] //Enter id(s) of CSS Horizontal UL menus, separated by commas
var csssubmenuoffset=-1 //Offset of submenus from main menu. Default is 0 pixels.

I have modified this in my .js file to -
var cssmenuids=["cssmenu1","cssmenu_2"] //Enter id(s) of CSS Horizontal UL menus, separated by commas
var csssubmenuoffset=-1 //Offset of submenus from main menu. Default is 0 pixels.

CSS file and changes

The original JKS .css file has this code to provide for IE -
http://www.javascriptkit.com/script/script2/csshorizontalmenu.css

* html p#iepara{ /*For a paragraph (if any) that immediately follows menu, add 1em top spacing between the two in IE*/
padding-top: 1em;
}

/* Holly Hack for IE \*/
* html .horizontalcssmenu ul li { float: left; height: 1%; }
* html .horizontalcssmenu ul li a { height: 1%; }
/* End */

I have modified this Holly Hack in my .css file to (at very bottom) -

To be helpful I've shown the whole .css file as I am not familiar with CSS and from all my extensive searching on Coding Forums and reading a great number related to CSS distortions in IE, it may be that may be just one or two tiny element changes that might rectify my issue that I URGENTLY need to rectify this problem.

.horizontalcssmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.horizontalcssmenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.horizontalcssmenu ul li a{
display: block;
width: 90px; /*Width of top level menu link items*/
padding: 2px 8px;
border: 1px solid white;
border-left-width: 0;
text-decoration: none;
background: url("menubg.gif") center center repeat-x;
color: white;
font: normal 12px Tahoma;
}

/*Sub level menu*/
.horizontalcssmenu ul li ul{
left: 0;
top: 0;
border-top: 1px medium #202020;
position: absolute;
display: block;
visibility: hidden;
z-index: 100;
}

/*Sub level menu list items*/
.horizontalcssmenu ul li ul li{
display: inline;
float: none;
}


/* Sub level menu links style */
.horizontalcssmenu ul li ul li a{
width: 200px; /*width of sub menu levels*/
padding: 2px 5px;
background: #cae2fd;
border: 1px #202020;
border-width: 0 1px 1px 1px;
font: normal 12px Tahoma;
color: black;
}

.horizontalcssmenu ul li a:hover{
background: url("menubgover.gif") center center repeat-x;
border: 1px solid #ffcc00;
color: #ffcc00;
font: bold 11px Tahoma;
}

.horizontalcssmenu ul li ul li a:hover{
background: #7db8fb;
color: black;
font: bold 12px Tahoma;
}

.horizontalcssmenu .arrowdiv{
position: absolute;
right: 0;
background: transparent url("menuarrow.gif") no-repeat center left;
}

* html p#iepara{ /*For a paragraph (if any) that immediately follows menu, add 1em top spacing between the two in IE*/
padding-top: 1em;
}

/* Holly Hack for IE \*/
* html .horizontalcssmenu ul li { float: left; height: 1%; }
* html p#iepara{padding-top: 1em; }
* html .horizontalcssmenu ul li a { height: 1%; }
/* End */


I do hope you will be able to offer a solution. Please explain what I'll need to do as clearly as you can since I'm not an expert in programming. Thanks in anticipation.
Regards,
Tim
Tim@TimLeitch.net.nz
http://TimLeitch.net.nz

try adding these two lines to your css file:


#cssmenu1
{
z-index:99;
}
#cssmenu_2
{
z-index:98;
}


your submenu is set to a z-index of 100, making sure its in front of everything. setting your top menu to be in front of your bottom menu, while keeping them both behind your submenu should fix your problem. I hope. let me know.

Hi Daniel,
Thanks very much indeed. :thumbsup: That was a great step forward adding your additional 2 lines in the CSS file. However its not quite right in IE yet.

In IE, almost all of the upper menu's dropdown submenu is now visible except the top line. The principle row of the lower menu remains visible continually and so the top line of the upper menu's dropdown submenu is obscured and not visible.

Perhaps I've added your 2 lines of CSS code in the wrong place? You didn't specify a place for it. Would this even make a difference? To make it easy for you I've copied the code of the revised css file below so you can see where I've added your lines. That is the only change I have made to it so you don't have to spend time examining for anything more.

.horizontalcssmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.horizontalcssmenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.horizontalcssmenu ul li a{
display: block;
width: 90px; /*Width of top level menu link items*/
padding: 2px 8px;
border: 1px solid white;
border-left-width: 0;
text-decoration: none;
background: url("menubg.gif") center center repeat-x;
color: white;
font: normal 12px Tahoma;
}

/*Sub level menu*/
.horizontalcssmenu ul li ul{
left: 0;
top: 0;
border-top: 1px medium #202020;
position: absolute;
display: block;
visibility: hidden;
z-index: 100;
}

#cssmenu1
{
z-index:99;
}
#cssmenu_2
{
z-index:98;
}

/*Sub level menu list items*/
.horizontalcssmenu ul li ul li{
display: inline;
float: none;
}


/* Sub level menu links style */
.horizontalcssmenu ul li ul li a{
width: 200px; /*width of sub menu levels*/
padding: 2px 5px;
background: #cae2fd;
border: 1px #202020;
border-width: 0 1px 1px 1px;
font: normal 12px Tahoma;
color: black;
}

.horizontalcssmenu ul li a:hover{
background: url("menubgover.gif") center center repeat-x;
border: 1px solid #ffcc00;
color: #ffcc00;
font: bold 11px Tahoma;
}

.horizontalcssmenu ul li ul li a:hover{
background: #7db8fb;
color: black;
font: bold 12px Tahoma;
}

.horizontalcssmenu .arrowdiv{
position: absolute;
right: 0;
background: transparent url("menuarrow.gif") no-repeat center left;
}

* html p#iepara{ /*For a paragraph (if any) that immediately follows menu, add 1em top spacing between the two in IE*/
padding-top: 1em;
}

/* Holly Hack for IE \*/
* html .horizontalcssmenu ul li { float: left; height: 1%; }
* html p#iepara{padding-top: 1em; }
* html .horizontalcssmenu ul li a { height: 1%; }
/* End */



I did try deleting the "z-index: 100; } that you drew attention to but this didn't improve things in IE and caused Firefox to have the IE fault so I put it back in.

I would appreciate receiving your review of this and your excellent advice once more. :) Thanks again.
Regards,
Tim
Tim@TimLeitch.net.nz
http://TimLeitch.net.nz

#cssmenu_2 li
{
z-index:97;
}

I wonder if that will do the trick. this will set the items on the second menu even lower, hopefully getting any bugs in the IE z-index code. Z-index never seems to work correctly... if anyone else has any ideas on how z-index behaves across browsers, i'm open for ideas.

If this doesn't do the trick, i'm pretty much out of options for you...

Hi Daniel,
Unfortunately your idea didn't work. However, thanks for your response.
The "li" addition and change "98" to "97" made no difference in IE or Firefox (FF was OK anyway).

Does anyone else have any ideas on how CSS "z-index" behaves across browsers and how to change the CSS code so as to retify the remaining problem of -
In INTERNET EXPLORER - The principle row of the lower menu remaining visible continually and so the top line of the upper menu's dropdown submenu is obscured and not visible.

Thanks in anticipation of any help.

Instead of the above changes, try reversing it back first, then, set the zIndex dynamically inside the .js file. To do this, add the changes in red to the .js file:

ultags[t].parentNode.onmouseover=function(){
this.style.zIndex=100
this.getElementsByTagName("ul")[0].style.visibility="visible"
this.getElementsByTagName("ul")[0].style.zIndex=0
}
ultags[t].parentNode.onmouseout=function(){
this.style.zIndex=0
this.getElementsByTagName("ul")[0].style.visibility="hidden"
this.getElementsByTagName("ul")[0].style.zIndex=100
}

I tested this on a single menu, with the browser resized small enough to cause some of the menu items to spill over to the next line. The drop downs on the 1st line appear over the second line menus correctly with the above.

Hi George,

Thanks so much for your prompt response and your BRILLIANT solution. :thumbsup: :thumbsup: :thumbsup: It works a treat.
How do you know this stuff (rhetorical question of course).

My Javascript Kit menus are now working very effectively on http://TimLeitch.net.nz. The upper layer submenu no longer disappears on mouse over movement so viewers can see more of the reports of adverse health risks arising from exposure to EMFs and electropollution. Thanks so much. :)

What you have shown is that Javascript Kit is responsive and backs up its wonderful range of very neat programmes with active support. :)

It's great to see real solutions available to a so commonly reported dilemma - applications and script working in Firefox but messing up in IE.

I am most grateful of your assistance.
Kind regards,

Tim
Tim@TimLeitch.net.nz
http://TimLeitch.net.nz

Holly Hack is not working in IE.

i have the same code as described above, with the fix described, and the submenu still disappears

other solutions, like { zoom: 1; } appear to be outdated too.

Can anybody point me in the right direction