Dropdown menu disappears in IE8 - html

Question

I am working on a dropdown meenu, which is disappearing in IE 8. Works fine in firefox and chrome, but not in IE8. i googled for two days and made many changes but still not working in IE. Here is the code for CSS.
.dropdownmenu li, .dropdownmenu li ul
{
display: block;display:inline;float:none;
}
dropdownmenu ul:hover , .dropdownmenu ul li:hover
{
display: block;display:inline; float:none;
}
.dropdownmenu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 37.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
color:#ffffff;
}
.dropdownmenu ul{
background:#333333;
height:35px;
list-style:none;
margin:0;
padding:0;
}
.dropdownmenu li a.top_link span {color:#ffffff;font-size:11px;}
.dropdownmenu li{
color: #FFFFFF;
font-size:11px;
float:left;
padding:0px;
}
.dropdownmenu li a{
background:#333333 url("dropdown/seperator.gif") bottom right no-repeat;
color:#ffffff;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 11px;
text-align:center;
text-decoration:none;
}
.dropdownmenu li a:hover{
background: #2580a2 url("dropdown/hover.gif") bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
.dropdownmenu li ul{
color:#ffffff;
font-size:10px;
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:auto;
z-index:200;
/*top:1em;
left:0;*/
}
.dropdownmenu li:hover ul{
display:block;
float:left;
}
.dropdownmenu li li {
background:url('dropdown/sub_sep.gif') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:auto;
}
.dropdownmenu li ul a{
display:block;
height:35px;
font-size:12px;
color:#ffffff;
font-style:normal;
margin:0px;
padding:0px 10px 0px 17px;
text-align:left;
}
.dropdownmenu li ulli a:hover{
display:block;
background:#2580a2;
color:#ffffff;
text-decoration:none;
}
Here is the php code, I have used <?include ('dropdown.php')?> on my site to include this in the CMS built website.
<link rel="stylesheet" href="dropdown/dropdown3.css" type="text/css" />
<ul class="dropdownmenu">
<li ><span>Home & Garden <img src="dropdown/down.gif"></span>
<ul class="sub">
<li>ArtWork</li>
<li>Bedding & Bath</li>
<li>Kitchen & Dining</li>
<li>Patio, Lawn & Garden</li>
<li>Pet Supplies</li>
<li>Sewing, Craft & Hobbies</li>
<li>Vacuum, Cleaning & Storage </li>
</ul>
</li>
</ul>
What else can i do to fix it in IE?
Also, when the dropdown menu is hovered, it shows a background color of #2580a2, which can be seen at .dropdownmenu li a:hover This particular thing is not being shown in chrome. What could be the reason?

Answer 1

Using Internet Explorer Compatibility View on that website may help it display properly. Try it.

Answer 2

I'm using jQuery Dropdown for this with no errors at any browser.
If your menu will work well Explorer Compatibility View as "Sagotharan" suggested you can override IE rendering engine by setting it to render as IE7 always, like so
<meta http-equiv="X-UA-Compatible" content="IE=7" />