Hello
I am having a drop down menu problem in ie9. this is the site: http://aogheliservices.com/AOG-WEBSITE-2012/index.htmlJava Script file:
$(function(){
$(document).ready(function(){
// Sub nav functions
$("ul.top-nav a").hover(function() {
$(this).parent().find("ul.sub-nav").slideDown(100);
$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul.sub-nav").slideUp(100);
});
});
});
// Sub sub nav functions
$("ul.sub-nav a").hover(function() {
$(this).parent().find("ul.sub-sub-nav").show();
$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul.sub-sub-nav").hide();
});
});
});
Css file:
/* Main Nav Elements /- { outline: none; }
nav {
width: 683px; margin: 0 auto; border: 0px solid #000000; font-family: Verdana, Arial, Helvetica, sans-serif; font-style: italic; font-weight: bold; }
ul.top-nav, ul.sub-nav, ul.sub-sub-nav { display: block; list-style: none; padding: 0; margin: 0; }
ul.top-nav > li { float: left; display: block; position: relative; top: 0; }
ul.top-nav > li > a { float: left; height: 27px; padding: 10px 12px 0 12px; font-size:12px; color: #fff; text-decoration: none; border-right: 1px dotted #7d7d7d; white-space: nowrap; background: #dcdada url(../images/nav/mainnav_bg.png) top left repeat-x; }
ul.top-nav li a:hover { background: url(../images/nav/mainnav_hover_bg.png); color: red; }
.no-border { border: 0 !important; }
/
Sub Nav Elements / ul.sub-nav, ul.sub-sub-nav { display: none; }ul.sub-nav { position: absolute; top: 35px; left: 0; width: auto; min-width: 200px; background: grey; border: 1px solid #ddd; border-top: 1px solid #000; }
ul.sub-nav li { display: block; position: relative; }
/
text / ul.sub-nav li a, ul.sub-sub-nav li a { display: block; padding: 8px 4px; margin: 0; background: none; color: white; font-size: 12px; border: none; text-decoration: none; white-space: nowrap; }ul.sub-nav li a:hover, ul.sub-sub-nav li a:hover { background: #dcdada; }
/
Sub Sub Nav Elements flyouts / ul.sub-sub-nav { position: absolute; top: 0; left: 220px; width: auto; min-width: 220px; background: #006B8F; border: 1px solid #ddd; }/
Misc Elements */ .clear { font-size: 0px; line-height: 0px; height: 0px; width: 0px; clear: both; }Can anyone please help? Scott
- Sold between 250 000 and 1 000 000 dollars
- Community Moderator
- Author was Featured
- Item was Featured
- Bought between 50 and 99 items
- Referred between 1000 and 1999 users
- Has been a member for 3-4 years
- Repeatedly Helped protect Envato Marketplaces against copyright violations
Hi Scott,
You need to declare a doctype in your HTML , before the first html tag. Since you haven’t, IE renders the document in quirks mode (essentially as IE6 ), which, as you can see, doesn’t work very well 
Hope that helps,
Chris
So i had : <!DOCTYPE HTML PUBLIC ”-//W3C//DTD HTML 4 .01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
in the first one and it made no difference… any other ideas?
- Sold between 250 000 and 1 000 000 dollars
- Community Moderator
- Author was Featured
- Item was Featured
- Bought between 50 and 99 items
- Referred between 1000 and 1999 users
- Has been a member for 3-4 years
- Repeatedly Helped protect Envato Marketplaces against copyright violations
You’re running in quirks mode http://www.quirksmode.org/css/quirksmode.html
Use a strict (or “almost strict”) doctype.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Hey sevenspark Tried what you last suggested and still not working? I am not sure what is up with this…
Any other ideas?
http://aogheliservices.com/AOG-WEBSITE-2012/index.html