CSS Dropdown menu is not visible in IE6

[Radhika]

Hi guys,
I have a problem that my css dropdown menu is visible in Mozilla FF but not in IE.

Here is my CSS and HTML code

*********************CSS CODE***************************
#outside{
border:1px solid #000099;
background:#ef8900;
width:988px;
}
#navigation-1 {
padding:1px 0;
margin:0px;
list-style:none;
width:990px;
height:21px;
border-top:1px solid #FFFFFF;
border-bottom:1px solid #FFFFFF;
font:normal 9pt verdana, arial, helvetica;
}
#navigation-1 li {
margin:0;
padding:0;
display:block;
height:100%;
overflow:visible;
float:right;
position:relative;
width:150px;
}
#navigation-1 li a:link, #navigation-1 li a:visited {
padding-top:1px;
display:block;
text-align:center;
text-decoration:none;
overflow:visible;
background: #ef8900;
color:#ffffff;
width:150px;
height:20px;
}
#navigation-1 li:hover a, #navigation-1 li a:hover, #navigation-1 li a:active {
padding-top:1px;
display:block;
text-align:center;
text-decoration:none;
overflow:visible;
background:#f8ac49;
color:#ffffff;
width:144px;
height:20px;
border-left:1px solid #ffffff;
border-right:1px solid #ffffff;
}
#navigation-1 li ul.navigation-2 {
margin:0;
padding:1px 1px 0;
list-style:none;
display:none;
background:#ffffff;
overflow:visible;
width:146px;
position:absolute;
top:21px;
left:-1px;
border-top:none;
}
#navigation-1 li:hover ul.navigation-2 {
display:block;
}
#navigation-1 li ul.navigation-2 li {
width:146px;
clear:left;
width:146px;
}
#navigation-1 li ul.navigation-2 li a:link, #navigation-1 li ul.navigation-2 li a:visited {
clear:left;
background:#ef8900;
padding:4px 0;
width:146px;
border:none;
border-bottom:1px solid #ffffff;
position:relative;
z-index:1000;
}
#navigation-1 li ul.navigation-2 li:hover a, #navigation-1 li ul.navigation-2 li a:active, #navigation-1 li ul.navigation-2 li a:hover {
clear:left;
background:#f8ac49;
padding:4px 0;
width:146px;
border:none;
border-bottom:1px solid #ffffff;
position:relative;
z-index:1000;
}
#navigation-1 li ul.navigation-2 li ul.navigation-3 {
display:none;
margin:0;
padding:0;
list-style:none;
position:absolute;
left:145px;
top:-2px;
padding:1px 1px 0 1px;
border:1px solid #000099;
border-left:1px solid #000099;
background:#ffffff;
z-index:900;
}
#navigation-1 li ul.navigation-2 li:hover ul.navigation-3 {
display:block;
}
#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link, #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited {
background:#000099;
}
#navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a, #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover, #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active {
background:#0066FF;
}
#navigation-1 li ul.navigation-2 li a span {
position:absolute;
top:0;
left:132px;
font-size:12pt;
color:#fe676f;
}
#navigation-1 li ul.navigation-2 li:hover a span, #navigation-1 li ul.navigation-2 li a:hover span {
position:absolute;
top:0;
left:132px;
font-size:12pt;
color:#ffffff;
}


/*styles for button*/
.buttonmenu{
list-style-type: none;
margin: 0;
padding: 0;
width: 170px;
}

.buttonmenu li a{
color: white;
display: block;
font-size:13px;
width: 100%;
padding: 2px 4px;
text-decoration: none;
font-weight: bold;
border: 1px solid;
border-color:#fff #ef8900 #fff #ef8900; /*light dark dark light*/
background-color: #3ba0bc;
text-decoration:none;
}


.buttonmenu li a:visited{
color: white;
}

.buttonmenu li a:hover, .buttonmenu li a:active{
color:#8B4513;
background-color: #f8ac49/*#CDB4C8;*/
}
***********************************
*****************HTML CODE*************
<div id="outside">
<ul id="navigation-1">

<li><a href="index.jsp?option=contactus" title="Contact Us" target="_self" >Contact Us</a>

</li>
</li>
<li><a href="index.jsp?option=help" title="Help" target="_self" >Help</a></li>
<li><a href="index.jsp?option=aboutus" title="About Us" target="_self" >About Us</a>
</li>
<li><a href="#" title="Categories" target="_self" >Categories</a>
<ul class="navigation-2">
<li><a href="index.jsp?option=listevents&cat=Cinemas">Cinemas</a></li>
<li><a href="index.jsp?option=listevents&cat=Exhibition">Exhibition</a></li>
<li><a href="index.jsp?option=listevents&cat=Drama or Theatre">Drama or Theatre</a></li>
<li><a href="index.jsp?option=listevents&cat=Museums">Museums</a></li>
<li><a href="index.jsp?option=listevents&cat=Sports and Adventure Event">Sports and Adventure Event</a></li>
<li><a href="index.jsp?option=listevents&cat=Art Shows">Art Shows</a></li>
<li><a href="index.jsp?option=listevents&cat=Tours">Tours</a></li>
</ul>
</li></div>


Help is appreciated

Thanks in advance

[TheJoshMan]

This is because IE6 does not support the :hover pseudo class for ANY element other than anchors (<a href>).

If you want to mimic the :hover pseudo class via CSS using IE6, you have to use a small snippet of javascript which will attach a unique class to that particular element (<li>) thus giving you the ability to style it in such a way that you are able to "fake" the :hover pseudo class.

Here are a couple of links to get you started.

http://www.alistapart.com/articles/dropdowns/

http://htmldog.com/articles/suckerfish/

http://www.xs4all.nl/~peterned/csshover.html

Also, please wrap your code between [ code ] tags from now on. This makes it much easier to navigate the post and also to tell what is and/or isn't code.