Forum Moderators: not2easy

Message Too Old, No Replies

IE8 CSS Drop Down Menu

         

tonynoriega

7:37 pm on Apr 14, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



new insect i found with IE8

my drop down menu, usually when you mouse off of the drop down menu, it re-hides itself...

now it just stays down...

anyone experience this and know what i should look for?

no, i dont use javascript for the menu.

swa66

10:42 pm on Apr 14, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Some minimal code that exhibits this ?

tonynoriega

4:57 pm on Apr 16, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



sorry, its alot of css... ive tried to tweak a few things, but no luck.


#nav {
background: url(../img/nav_grad.gif) repeat-x top right;
margin: -10px 0 8px 8px;
padding: 0 0 0 0;
height: 46px;
top: 100px;
width: 965px;
}

#nav li {
list-style-type: none;
float:left;
font-size: 12px;
}

#nav, #nav ul {
list-style: none;
line-height: 1;
font-weight: bold;
padding: 0;
}

#nav a {
display: block;
}

#nav li a:hover, #nav li a:visited {
font-size:12px;
}

#nav li a {
height: 46px;
width: 151px;
text-indent: -9009px;
background:transparent url(../img/mn.gif) no-repeat 0 0;
}

#nav li ul li a {
height: auto;
text-indent: 0;
background:transparent url();
}

#nav li#home a {
width:182px;
background-position: 0 0;
}

#nav li#home a:hover {
background-position: 0 0 ;
}

#nav li#plans a {
width: 151px;
background-position: -182px 0;
}

#nav li#plans a:hover {
background-position: -182px -46px;
}

#nav li#health a {
width:165px;
background-position: -333px 0;
}
#nav li#health a:hover {
background-position: -333px -46px;
}

#nav li#resource a {
width:154px;
background-position: -498px 0;
}
#nav li#resource a:hover {
background-position: -498px -46px;
}

#nav li#about a {
width:97px;
background-position: -655px 0;
}
#nav li#about a:hover {
background-position: -655px -46px;
}

#nav li ul {
position: absolute;
left: -999em;
width: 14.4em;
width: 13.9em;
font-weight: normal;
border-width: 0.25em;
margin: 0;
}

#nav li ul {
margin-top: -3px;

}

#nav li ul li {
border: 1px solid #003f6b;
border-bottom: none;
padding: 2px 6px;
background: #FFFFFF;
}

#nav li ul li.last {
border: 1px solid #003f6b;
}

#nav li ul li a {
text-decoration: none;
}

#nav li li {
padding-right: 1em;
width: 13em
}

#nav li ul a {
width: 13em;
width: 9em;
}

mihai2u

11:10 am on Apr 18, 2009 (gmt 0)

10+ Year Member



If you're dropdown works in IE7, then you would just have to stick this into the head and it would work in IE8 too:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

What you might experience isa 'sticky' dropdown.
Google for 'IE7 sticky hover bug' and you would certainly find a lot of fixes for this.

tonynoriega

3:01 pm on Apr 27, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Unfortunately that did not do the trick.

i have googled everything under the sun and can not find what might be causing the issue.

jameshopkins

4:11 pm on May 26, 2009 (gmt 0)

10+ Year Member



Can we see some corresponding HTML, or better still, a web page?

coopster

4:16 pm on May 26, 2009 (gmt 0)

WebmasterWorld Administrator 10+ Year Member



No links, please review the Terms of Service and Forum Charter.

jameshopkins

4:20 pm on May 26, 2009 (gmt 0)

10+ Year Member



Apologies, I'm new here, so need to review those

coopster

5:12 pm on May 26, 2009 (gmt 0)

WebmasterWorld Administrator 10+ Year Member



Thank you. And welcome to WebmasterWorld, jameshopkins!

knght66

12:36 pm on Jan 28, 2010 (gmt 0)

10+ Year Member



I am having the same issue. Did you ever come to a solution? Any help would be greatly appreciated!

knght66

12:36 pm on Jan 28, 2010 (gmt 0)

10+ Year Member



I am having the same issue. Did you ever come to a solution? Any help would be greatly appreciated!

knght66

12:36 pm on Jan 28, 2010 (gmt 0)

10+ Year Member



I am having the same issue. Did you ever come to a solution? Any help would be greatly appreciated!