dropdown menu don't work in IE and works in the other browsers

[nisha]

hi,

I am learning css and tried using the dropdown menu with css codes for my site. I coded as per some tutorials in alistpart.com and achieved the dropdown
menu as i needed but when i saw it in IE I was not able to see the dropdown menu. so forget any errors in it if any and yes in Firefox it looks as i wanted.

here is the link to my page :

:: Mr. Chows

the take your mouse over menu in the top links to see the dropdown menu.

and i am also adding the code used for dropdown menu :

<div id="container">
    <ul id="nav">
        <li id="home"><a href="index.html">Home</a></li>

        <li id="about-us"><a href="about.html">About Us</a></li>
        <li id="menu"><a href="#">Menu</a>
            <ul>
                <li><a href="soups.html">Soups</a></li>
                <li><a href="starters.html">Starters</a></li>
                <li><a href="main_course.html">Main Course</a></li>
                <li class="last"><a href="meal_combos.html">Meal Combos</a></li>
            </ul>
        </li>
        <li id="nutrition-and-hygiene" class="active"><a href="nutrition_hygine.html">Nutrition &amp; Hygiene</a></li>
        <li id="contact"><a href="contactus.html">Contact</a></li>
    </ul>
</div>  

and the css for the drop down menu is below

#container {
font-size: 0.8em;
width: 551px;
margin: 0 auto;
}

/* ~~~~~~~~~~ dropdown styles ~~~~~~~~~~ */

#nav {
padding: 0;
margin: 0;
list-style: none;
width: 551px;
height: 42px;
}
#nav a {
display: block;
width: 8em;
background-image: url(../images/top_menu.jpg);
text-indent: -999px;
height: 42px;
}
#nav li {
float: left;

}
#nav li ul {
position: absolute;
width: 8em;
left: -999em;
}
#nav li:hover ul, #nav li.hover ul {
left: auto;
}
#home a {
width: 91px;
}
#about-us a {
width: 106px;
background-position: -91px 0;
}
#menu a {
width: 87px;
background-position: -197px 0;
}
#nutrition-and-hygiene a {
width: 167px;
background-position: -284px 0;
}
#contact a {
width: 100px;
background-position: -451px 0;
}
#home a:hover {
background-position: 0 42px;
}
#about-us a:hover {
background-position: -91px 42px;
}
#menu a:hover {
background-position: -197px 42px;
}
#nutrition-and-hygiene a:hover {
background-position: -284px 42px;
}
#contact a:hover {
background-position: -451px 42px;
}
#home.active a
{
background-position: 0 -42px;
}

#about-us.active a
{
background-position: -91px -42px;

}
#menu.active a
{
background-position: -197px -42px;
}
#nutrition-and-hygiene.active a
{
background-position: -284px -42px;
}
#contact.active a
{
background-position: -451px -42px;
}
#nav li ul a {
text-indent: 0;
background-image: url(../images/img_menu_bullet.jpg);
background-repeat: no-repeat;
background-color: #900000;
height: auto;
width: 10em;
color: #E1AD7A;
text-decoration: none;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 30px;
background-position: 12px 12px;
border-top: 1px solid #AD0000;
border-left: 1px solid #AD0000;
border-right: 1px solid #AD0000;
}
#nav li ul li a:last-child {
border-bottom: 1px solid #AD0000;
}

#nav li ul li a:hover {
background-image: url(../images/img_menu_bullet.jpg);
background-repeat: no-repeat;
background-position: 12px 12px;
color: #330000;
}
.last
{
border-bottom: 1px solid #AD0000;
}

so please suggest what is the easy and valid way to make the dropdown menu visible in IE.

Help and assistance from anybody will be appreciated.

[jontywagener]

which version of IE are you using? because in IE7 the menu displays

[nisha]

i am talking about IE 6.
Also please check my full site in IE 6 and 7
as i have IE 6 only.

hope u understand.

[jontywagener]

ok. will do.

BTW:
you can download IE7 free here Internet Explorer: Home Page

You can also download an application called multiple IE here: Install multiple versions of IE on your PC | TredoSoft that installs IE6, IE5.5, and IE5.0

[tommylogic]

Microsoft will be dropping support for IE6 very soon... you should download IE7 as an alternate browser and keep IE6 for testing purposes. Continue to code for FF2 & IE7 and add conditions for IE6 as needed.

[nisha]

thanks both of u for the links for IE 7 and all your suggestions. for this time u will have to help me with IE 6 and 7 and next time i will go for IE 7.

[sunwukung]

I'm trying to do something similair myself.
The problem might be because IE6 doesn't recognise the :hover pseudo-class. Here are two methods that seem to be more robust:

Pure CSS vertical Drop Down Menu

Stu Nicholls | CSSplay | Validating drop down cross-browser menu