Menu Not working in IE 9 In Asp.net

See more:

ASP.NET

CSS

Hi
I have Following code inside my website's master page.

 <ul class="2Col" id="primNav" name="primNav">
  <li class=""><a href="A.aspx" title="Home">HOME</a></li>
  <li class="lavel_1"><a href="B.aspx" title="About Us">About Us</a>
   <ul>
     <li><a href=C.aspx" title="About My Gold Plan">About Plan</a>
   </li>
</ul>
</ul>
...10 More menu

The menu shows up and works fine with IE8, Mozilla Firefox, Google Chrome, Opera browser but fails to display properly when seen from an IE9 ( a rather latest offering from MS ). I tried all the possible tricks and nothings seems to work other than changing the view to compatibility mode. If I had to run IE 9 with compatibility view I was happier to not have it installed at the first place. Besides running in IE9 compatibility view creates some more issues with Website hence this work around is not applicable in my case and I am in search of a true fix. I have to get this IE9 browser to work like other browsers do.

The menu when opened in IE9 displays it shows last menu under the first menu
and it will shown nly when over the mouse on it

CSS File :

#primNav li.lavel_1:hover {
	border-bottom:none;
	height:34px;
	line-height:34px;
}
#primNav ul { 
	position:absolute; 
	left:-9999px;
	padding-top:5px;
	z-index:9999 !important;
}
#primNav li:hover ul {
	left:-1px;
	top:34px;
	background-color:#fff;
	border:1px solid #c7d4e5;
	border-top:none;
	width:199px;
}
#primNav ul li {
	float:none;
	display:block;
	width:190px;
	font-size:10px;
	padding:0 5px;
	background:none;
}
#primNav ul a {
	color:#0b67b9;
	padding:5px 10px !important;
	border-bottom:1px solid #e6f0f8;
	text-align:left;
	background:none;
	height:auto !important;
	line-height:normal !important;
	zoom:1;
	_float:none;
}
#primNav ul li:hover {
	padding:0 5px;
	background:#3a78ca url(../images/global/secanLavelBg.png) repeat-x right top;
	border:none;
}
#primNav ul li:hover a {
	color:#fff;
	border:none;
	padding-bottom:6px !important;
	
}
#primNav li:hover ul ul {
	left:-9999px;
	padding:0;
}
#primNav ul li:hover ul {
	left:201px;
	top:0;
	border-top:1px solid #c7d4e5;
}
#primNav ul li:hover ul a {
	color:#0b67b9;
	border-bottom:1px solid #e6f0f8;
}
#primNav ul ul li:hover a {
	color:#fff;
	border:none;
	padding-bottom:7px !important;
}
#primNav .lavel_2, #primNav .lavel_2:last-child {
	background:url(../images/global/subMenuBullet.png) no-repeat 186px center;
}
#primNav ul .lavel_2:hover {
	background:url(../images/global/subMenuBulletOver.png) no-repeat right center;
}
#primNav a, .primNavRight a { 
	color:#fff;
	font-weight:bold;
	text-decoration:none;
}

Can any tell me there is any solution for this.
Thank You In advance
Chetan V.