CSS Drop down menu broke in IE. CSS specific styles for browsers?

HTML & CSS
1

Hi guys.

My navigation menu uses CSS to show a dropdown menu on hover.

It works fine in firefox and chrome but in IE it is completely broke.
Everytime I move the mouse away from a menu item, the hover menu disappears instantly restricting me from clicking on a sub menu in time.

I wrote out the code here but I think it’s probably just easier to show an example:
http://pokerslice.net/hr/navtest.html
http://pokerslice.net/hr/navtest.css

I am using IE9 and got the css code from a few tutorial sites, and someone on here helped me with the rest a few weeks ago but I am only just noticing this problem now as I use firefox mainly.

As you can see I had to use padding-bottom on the ul li so the sub menu aligns perfectly with the bottom of the navigation bar.
If I change the ul li “padding-bottom: 6px” to “5px” then it works fine in IE, but obviously it doesn’t look very good due to overlapping.

I was thinking about maybe having a bit of code to change this to 5px if the browser is IE but I am sure there might be better ways?

Any help appreciated.

2

Hello :). In short, you were placing the dropdown too faraway.

Update your entire CSS file with this

* { margin: 0; padding: 0; }
body { font-family: arial, serif; background: #bababa; font-size:10px;}
article, aside, figure, footer, header, nav, section { display: block; }
li  {list-style: none;
float:left;}
img,fieldset {
	border:none;
}

/*Main Navigation Bar--------------------------*/
.nav_main{
clear:both;
background:#3c93df;
border-top: 1px solid #3b3b3b;
border-bottom:1px solid #3b3b3b;
font-size:1.5em;
line-height:1.4em;
font-family:arial;
color: white;
text-transform:uppercase;
}
.nav_main ul {
padding-top:4px;
float:left;
margin-left:40px;
}
.nav_main li {
padding-right: 2em;
position:relative;
}
/*Menu Div ID wrap within nav*/
#mainMenu {
clear:both;
zoom:1;
text-align:left;
text-transform:uppercase;
}
#mainMenu a {
color:#DEF;
text-shadow:0 0 2px #004;
text-decoration:none;
}
#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
color:#FFF;
text-shadow:0 0 4px #04C;
}
.nav_main ul ul.sub-menu {
left: 0pt;
padding:0;
position: absolute;
top:100%;
margin-left:-999em;
}
.nav_main ul li {
position: relative;
padding-bottom:6px;
}
.ul.sub-menu {
padding-top: 15px;
}
.nav_main ul li li {
background: none repeat scroll 0% 0% #3c93df;
border-top: 1px solid #FFFFFF;
color: #FFFFFF;
margin-left: 0px;
margin-top: 0px;
padding: 5px 10px;
position: static;
white-space: nowrap;
width:100%;
}
.nav_main ul li:hover ul.sub-menu {
background: none repeat scroll 0% 0% transparent;
font-size: 0.8em;
padding-top:0px;
margin: 0px 0pt 0pt -9px;
}
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

And now update your HTML…
<nav class=“nav_main clearfix”>

You should know that <nav>, being HTML5, isn’t supported at all in IE8 and down, so your page is essentially busted completely in those browsers. I switched it to <div> instead in my local file.

Some things noteworthy: You were using display:none to hide/show the dropdown. Don’t do that :). In my example I used a negative left margin to hide, and then set to 0 to show (you already defined margin-left:0; on the hover code anyway so it worked otu perfectly). Also, I changed the coordinates set for the AP dropdown to %'s instead of pt, and I removed the height of the <nav> container, allowing the content to dictate the height. Thus the clearfix code at the bottom of the CSS file is needed to contain floated elements

3

Hi, thanks for that!

It work’s great but I am still having a few problems.

Been trying to figure it out for the past 1.5 hours but I give up.

http://pokerslice.net/hr/navtest.html
http://pokerslice.net/hr/navtest.css

As you can see the hover works great in IE now, the hover sub menu no longer disappears as fast.

The problem is that there is still an inconsistent gap between the hover sub menu and the main navigation bar.

In chrome it looks perfect, there is 1 px gap it seems.
But now in Firefox and IE, the gap is wider.

I’ve tried everything from changing line-height, to the ul padding.
Either firefox+ie now work fine and chrome doesn’t, or vice versa.

I’d really like it to look the same across all browsers, and the way it looks now in chrome is the way I want it to look on the others.

Any ideas on this?

4

Rule of thumb, you can’t leave the browser to guess the height on delicate situations like yours (I know I am arguing with myself) where the dropdown must match up with the image :). If it has to round the height, some round up, some round down.

* { margin: 0; padding: 0; }
body { font-family: arial, serif; background: white; font-size:10px;}
article, aside, figure, footer, header, nav, section { display: block; }
li  {list-style: none;
float:left;}
img,fieldset {
	border:none;
}

/*Main Navigation Bar--------------------------*/
.nav_main{
clear:both;
background:url(images/navmain.png) 0 0 repeat-x;
border-top: 1px solid #3b3b3b;
border-bottom:0px solid #3b3b3b;
font-size:1.5em;
line-height:1.3em;
font-family:furore;
color: white;
height:30px;
text-transform:uppercase;
}
.nav_main ul {
float:left;
height:30px;
margin-left:40px;
}
.nav_main li {
padding-right: 2em;
position:relative;
}
/*Menu Div ID wrap within nav*/

#mainMenu a {
color:#DEF;
text-shadow:0 0 2px #004;
text-decoration:none;
}
.nav_main ul ul.sub-menu {
left: 0pt;
padding:0;
margin-left:-999em;
position: absolute;
top:100%;
}
.nav_main ul li {
position: relative;
padding-top:4px;
height:20px;
padding-bottom:6px;
}
.ul.sub-menu {
padding-top: 15px;
}
.nav_main ul li li:first-child {
background: none repeat scroll 0% 0% #3c93df;
border-top: 0px solid #FFFFFF;
color: #FFFFFF;
margin-left: 0px;
padding: 5px 10px;
position: static;
white-space: nowrap;
width:100%;
}
.nav_main ul li li {
background: none repeat scroll 0% 0% #3c93df;
border-top: 1px solid #FFFFFF;
color: #FFFFFF;
margin-left: 0px;
margin-top: 0px;
padding: 5px 10px;
position: static;
white-space: nowrap;
width:100%;
}
.nav_main ul li:hover ul.sub-menu {
background: none repeat scroll 0% 0% transparent;
display: block;
font-size: 0.8em;
padding-top:0px;
margin: 0px 0pt 0pt -9px;

}
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
5

Amazing!!! Thank you so much.

Although I am still scratching my head how you did it. I spent hours trying to fix that :frowning:

I see you gave the ul a height of 30px, and the ul li height 20px.

Can you tell me how you figured out to give it those heights?

6

I didn’t give the anchor a 30px height. If I did that was a mistake. Remove it and see if it’sstill fixed.

You have the div to 30px height. In order to prevent rounding errors, and for visual purposes, I put a 4px top padding on the <li> (IIRC) and 6px bottom padding plus the 4px top padding + 20px height = the 30px height. Matches the div :).

All is for nought though, if text is resized. Should really convert all those px based values off of ems so that it’ll scale with text resize.

7

Thanks for everything! Learned something new :slight_smile:

Yeah I use chrome mainly, but I have started using firefox more because Firebug add on seems to work much much better on it.