Sub menu is not working on IE

HTML & CSS
1

Hi I really need a quick solution… My client is nearly threatening me on this.

I created a sub-menu for wordpress page navigation you can see it here: http://www.sarasotaatnight.com/

you will see it is working on all the browsers except IE … I check every thing but still don’t know why it is happening… finally I came back to my old school.

please I really really need a quick help… Thanks in advance.

/* navigation menu*/
.navigation_holder{ width:990px; background:url(images/bg_navbar.jpg) no-repeat; height:29px;}
.left{ float:left;}
.right{ float:right;}
.nav_holder{ margin:0px; padding:0px; width:900px;}
.social_holder{ margin:0px; padding:0px; width: 80px; overflow:hidden; float:right;}
.social_holder ul{ list-style:none; display: inline;}
.social_holder li{ float: left; padding:2px; margin-top:3px;}
.social_holder ul li img { width: 27px; height: 27px;}
#nav { width: 980px; height:29px; float:left; background:url(images/bg_navbar.jpg) no-repeat; padding:6px 7px 0 7px; list-style:none;}
#nav {
    margin: 0;
    padding: 7px 0px 0;
    line-height: 100%;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
z-index:5; 
}
#nav li {
    margin: 0 5px;
    padding: 0 0 8px;
    float: left;
    position: relative;
    list-style: none;
}
/* main level link */
#nav a {
    font-weight:400;
    color: #eee;
    text-decoration: none;
    display: block;
    padding:  4px 10px;
    margin:0px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    background: #9B378D; /* old browsers */

background: -moz-linear-gradient(top, #9B378D 35%, #721263 99%); /* firefox */

background: -webkit-gradient(linear, left top, left bottom, color-stop(35%,#9B378D), color-stop(99%,#721263)); /* webkit */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9B378D', endColorstr='#721263',GradientType=0 ); /* ie */
}
/* main level link hover */
#nav .current a, #nav li:hover > a {
background: #721263; /* old browsers */

background: -moz-linear-gradient(top, #721263 0%, #973489 50%, #F45FDE 100%); /* firefox */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#721263), color-stop(50%,#973489), color-stop(100%,#F45FDE)); /* webkit */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#721263', endColorstr='#F45FDE',GradientType=0 ); /* ie */
    color: #FFF;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    text-shadow: 0 1px 0 rgba(0, 0, 0, .8);
}
/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {
    background: none;
    border: none;
    color: #ccc;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
z-index:5; 

}
#nav ul a:hover {
background: #EE72FF; /* old browsers */
background: -moz-linear-gradient(top, #EE72FF 0%, #F2C1EA 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#EE72FF), color-stop(100%,#F2C1EA)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EE72FF', endColorstr='#F2C1EA',GradientType=0 ); /* ie */
    color: #fff !important;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
z-index:5; 
}
/* level 2 list */
#nav ul {
background: #721263; /* old browsers */
background: -moz-linear-gradient(top, #721263 0%, #AA2590 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#721263), color-stop(100%,#AA2590)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#721263', endColorstr='#AA2590',GradientType=0 ); /* ie */
    display: none;
    margin: 0;
    padding: 0;
    width: 185px;
    position: absolute;
    top: 29px;
    left: 0;
    border: solid 1px #721263;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
z-index:5; 
}
/* dropdown */
#nav li:hover > ul {
    display: block;
}
#nav ul li {
    float: none;
    margin: 0;
    padding: 0;
z-index:5; 

}
#nav ul a {
    font-weight: normal;
    text-shadow: 0 1px 1px rgba(255, 255, 255, .9);
z-index:5; 
}
/* level 3+ list */
#nav ul ul {
    left: 181px;
    top: 3px;
z-index:5; 

}
/* rounded corners for first and last child */
#nav ul li:first-child > a {
    -webkit-border-top-left-radius: 4px;
    -moz-border-radius-topleft: 4px;
    -webkit-border-top-right-radius: 4px;
    -moz-border-radius-topright: 4px;
}
#nav ul li:last-child > a {
    -webkit-border-bottom-left-radius: 4px;
    -moz-border-radius-bottomleft: 4px;
    -webkit-border-bottom-right-radius: 4px;
    -moz-border-radius-bottomright: 4px;
}
/* clearfix */
#nav:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
#nav {
    display: inline-block;
}
html[xmlns] #nav {
    display: block;
}
* html #nav {
    height: 1%;
}
2

You’re declaring styles for #nav several times. First you say it’s a block. Then you say it’s inline-block (you know that doesn’t work out of the box in IE right?). Then you try to put a z-index on it, but it’s not positioned. And you hide the whole thing from screen readers but setting the submenu to display: none.

Really, can you remove this? What the heck is it doing?


#nav {
    display: inline-block; /*where's the display: inline afterwards to get around the IE bug?*/
}

Seeing the code after it:


html[xmlns] #nav {
    display: block;
}
* html #nav {
    height: 1%;
}

It looks like you’re trying some old method of triggering Haslayout. But it’s all for nothing: #nav has a width and is floated. It already has Layout. All that code at the bottom is just potentially waiting to trip up browsers. You can get rid of all of that.

When debugging this stuff, remove all the round-corner and gradient junk… it just makes your code hard to read, also for you (or you would have seen that you list #nav multiple times). You add that stuff back in last.

The blurry text gives me a headache.

Ok, anyway, took a look in IE7 and your main issue just looks to be mostly a z-index issue. Probably the easiest way for you to fix that is to make the menu itself (#nav) position: relative. Then put a higher z-index on it (you have 5 now, make that like 100 cause I didn’t bother looking at what the later content has), and remove all the z-indices you have on the sub elements; IE is ignoring those.

I did not check in 6 or 8. IE7 is showing dropdowns, but they’re simply getting covered by later content. Setting a higher z-index and making nav positioned can fix that.

Remember that only positioned elements can have an explicit z-index. Anyone else you put z-index on, the browser just ignores it.

3

I dont know what I am … :frowning: simply a ******* ***** :shifty:, but mate thanks a lot…

4

did it work?

I feel sorry for anyone who has to develop in joomla

5

yes it worked … trust me i didn’t know about the z-index issue on IE before… well practice makes a man perfect that well said though…

hey thank you again…

6

Well here’s where I originally learned of IE’s z-index issue (where you fix it by setting z-index on the parent of whoever you want on top):
http://annevankesteren.nl/2005/06/z-index