dropdown disappears in IE 8

Hi. 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" />

<li ><a href="?category_id=140" class="top_link"><span>Home & Garden  <img src="dropdown/down.gif"></span></a>
    <ul class="sub">
        <li><a href="?category_id=145">ArtWork</a></li>         
        <li><a href="?category_id=146">Bedding & Bath</a></li>
        <li><a href="?category_id=150">Kitchen & Dining</a></li>
        <li><a href="?category_id=151">Patio, Lawn & Garden</a></li>
        <li><a href="?category_id=152">Pet Supplies</a></li>
        <li><a href="?category_id=153">Sewing, Craft & Hobbies</a></li>
        <li><a href="?category_id=154">Vacuum, Cleaning & Storage </a></li>
    </ul>
</li>

There is a <ul class="dropdownmenu"> on the second line and closed it at the last line. I did not put it here because if i do then the code is not being shown. 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?

ansaurus

tags:

views:

answers:

dropdown disappears in IE 8

related questions