Drop down menu in ie9 not working

Envato Authors Theme Authors
1

Hello

I am having a drop down menu problem in ie9.
this is the site:
http://aogheliservices.com/AOG-WEBSITE-2012/index.html

Java 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

2

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 :wink:

Hope that helps,

Chris

3

So i had :

in the first one and it made no difference… any other ideas?

4

You’re running in quirks mode http://www.quirksmode.org/css/quirksmode.html

Use a strict (or “almost strict”) doctype.


            


            

              
              
              
            


          

          

            

              



              
                  
                  
              5
              
            

            

              
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