Problem with dropdown Horizontal navigation in IE7, IE6, IE 5.5, IE5

[Dozzer81]

I'm having a problem with my CSS for my horizontal navigation, it works fine in Firefox but in IE7, the sub-menu dropdown appears to be behind some of my content but still displays (Which probably is related to the Z-index). The main problem though is that the sub-menu fails altogether in IE6, IE5.5 and IE5, when you rollover the link no submenu drops down and the link appears to be inactive? If anyone can help me with this I would appreciate it alot. Here is my CSS:

/*********************** NAVIGATION STYLES ***********************/
.nav
{
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:14px;
width:100%;
float:left;
margin:0;
padding:0;
position:absolute;
top:3em;
left:1.5em;

}
.nav a
{
text-align: left;
display:block;
border: 1px solid #EEEEEE;
background-color:#FFFFFF;
color:#616161;
white-space:nowrap;
margin:0;
padding:0;
text-decoration:none;
}
.nav a:visited /* menu at rest */
{
color:#616161;
background-color:#FFFFFF;
text-decoration:none;
}
.nav a:hover /* menu at mouse-over */
{
color:#FF26A8;
border: 1px solid #FF26A8;
background-color:#FFFFFF;
text-decoration:none;
}
.nav ul
{
list-style:none;
margin:0 0.25em 0 0;
padding:0;
float:left;
width:8.5em; /* width of all menu boxes */
}
.nav li
{
position:relative;
padding:0;
margin:0;
min-height: 1px; /* Sophie Dennis contribution for IE7 */
vertical-align: bottom; /* Sophie Dennis contribution for IE7 */
width:8.5em;
}
.nav ul ul
{
position:absolute;
z-index:500;
top:auto;
display:none;
padding:0 0 0 0.65em;
margin:0;
font-size:13px;

}
div.nav li:hover
{
z-index:100;
cursorointer;
text-decoration:none;
}
div.nav li:hover ul ul, div.nav li li:hover ul ul, div.nav li li li:hover ul ul, div.nav li li li li:hover ul ul
{
display:none;
}
div.nav li:hover ul, div.nav li li:hover ul, div.nav li li li:hover ul, div.nav li li li li:hover ul
{
display:block;
}
/* End NAVIGATION Styles */

and my navigation code in the HTML:

<div class="nav">
<ul>
<li><a href="index.html">Home</a></li>
</ul>
<ul>
<li><a href="artistlist.html">Artists</a></li>
</ul>
<ul>
<li><a>Exhibitions</a>
<ul>
<li><a>Recent</a></li>
<li><a>Future</a></li>
<li><a href="past.html">Past</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="contactus.html">Contact Us</a></li>
</ul>
<ul>
<li><a>About Us</a>
<ul>
<li><a href="whoweare.html">Who We Are</a></li>
<li><a href="artservices.html">Art Services</a></li>
<li><a href="clients.html">Clients</a></li>
<li><a href="news.html">News</a></li>
</ul>
</li>
</ul>
</div>

 

[Vragabond]

You rely on the :hover pseudo class applied to the li to show the submenu. This works in all modern browsers but was not supported in IE before version 7. I suggest you look into small javascript scripts that add that functionality like the one used in Suckerfish dropdowns.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[BillyRayPreachersSon]

Also get out of the habit of having a new UL for each top-level item in your nav. Why do this? It's just wrong.

Just use one UL, with lots of LIs, and nested ULs in each of those LIs if they have child items.

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]