CSS Drop Down Menus / IE6

Hello,

I have a nice CSS drop-down menu that works in Firefox & IE7, but not IE6. I know the CSS support has increased for IE7, but I’m wondering what I should do to fix the CSS so it works in IE6. I’m designing/developing on a MAC and also testing on Windows Vista, but only IE7 as Microsoft will not allow IE6 to be downloaded to Vista – didn’t know ?

Any advice or help is greatly appreciated. ?

msflux.

An example page can be seen here: [url]http://qa.adogslife.net/index.php?area=in_the_news[/url]

The page and the CSS validates. It’s probably easier to view the CSS & HTML online, but here it is:

#NavigationDiv{
width: 420px;
float: right;
text-align:right;
margin: 13px 0 0 0;
}

#main_menu {
position: relative;
height: 15px;
top: 0;
margin: 0;
margin-top: 5px;
margin-top /**/: 0;
margin-right: 0px;
margin-left: 5px;
padding: 0;
text-align: left;
z-index: 2000;
}

.menu ul {
margin: 0;
padding: 0;
list-style: none;
}

.menu li {
float: left;
position: relative;
width: auto;
background-color: white;

}

.AboutMenu li {
float: left;
position: relative;
width: 180px;

}

.ProductsMenu li {
float: left;
position: relative;
width: 180px;
border: 0;

}

.TheLabels li {
float: left;
position: relative;
width: 180px;

}

.menu li ul {
position: absolute;
display: none;
top: 100%;
left: 0;
}

.menu li>ul {
top: auto;
left: auto;
}

.menu li:hover ul, .menu li.over ul {
display: block;
background-color: #e6e6e6;
}

.menu li li {
float: none;
font-size: 12px;
font-family: arial, helvetica, geneva, sans-serif;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;

}

.menu li li.lastli {
border-bottom: 1px solid #ccc;
}

.menu li li.firstli {
border-top: 1px solid #ccc;
}

.menu li li a {
display: block;
padding: 0.2em 10px;
font-weight: normal;
color: #0066cc;
}

.menu li li a:hover, .menu li li a.over {
color: #275674;
background: #eaeef1;
}

.menu li a {
display: block;
color: #0066cc;
text-decoration: none;
}

HTML

<div id=”NavigationDiv”>

<div id=”main_menu”>

<div class=”menu”>

<ul id=”menu_ul”>

<li class=”AboutMenu”><a href=”#” title=”About Us”><img src=”http://www.adogslife.net/images/navigation/nav_About_Us.gif” class=”Navigation” alt=”About Us” width=”109″ height=”35″ style=”margin-right: 20px” /></a>

<ul>
<li class=”firstli”><a href=”http://qa.adogslife.net/index.php?area=our_story”>&raquo; Our Story</a></li>

<li><a href=”http://qa.adogslife.net/index.php?area=in_the_news”>&raquo; In the News</a></li>

<li><a href=”http://qa.adogslife.net/index.php?area=faq”>&raquo; FAQs</a></li>

<li class=”lastli”><a href=”http://www.adogslife.net/dogblog/”>&raquo; The Dog Blog</a></li>

</ul>
</li>

Also in #CSS _↴