XHTML and CSS code in IE6 Discussion

Hi everyone,

I have designed a dropdown menu navigation using only css and xhtml which works great in Internet Explorer 7 and Firefox.
When I tested in Internet Explorer 6 the dropdown doesn't work.
Will I need some javascript for this to work or is there some kind of IE6 hack which will acheive the same?

Here is a basic version of the xhtml 1.0 strict code used:

<div class="menu">
<ul>
<li><a href="" title="Sitemap">---Quick Select---</a>
<ul>
<li><a href="#" title="Link1">Link1</a></li>
<li><a href="#" title="Link2">Link2</a></li>
<li><a href="#" title="Link3">Link3</a></li>
<li><a href="#" title="Link4">Link4</a></li>
<li><a href="#" title="Link5">Link5</a></li>
<li><a href="#" title="Link6">Link6</a></li>
<li><a href="#" title="Link7">Link7</a></li>
<li><a href="#" title="Link8">Link8</a></li>
<li><a href="#" title="Link9">Link9</a></li>
<li><a href="#" title="Link10">Link10</a></li>
</ul>
</li>
</ul>
</div>

Code (markup):

Here is the css code used:

.menu {
font-family: Verdana, Arial, Helvetica, sans-serif;
position:relative;
font-size:10px;
z-index:100;
float:right;
margin-right:16px;
margin-top:60px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #CCCCCC;
}

.menu ul li a, .menu ul li a:visited {
display:block;
text-decoration:none;
width:128px;
height:16px;
padding-left:10px;
color:#333333;
line-height:16px;
font-size:10px;
background-color: #FFFFFF;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #CCCCCC;
border-bottom-color: #CCCCCC;
border-left-color: #CCCCCC;
}

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

.menu ul li {
position:relative;
}

.menu ul li ul {
display: none;
}

.menu ul li:hover a {
color:#000000;
background-color: #CCCCCC;
}

.menu ul li:hover ul {
display:block;
position:absolute;
top:17px;
}

.menu ul li:hover ul li ul {
display: none;
}

.menu ul li:hover ul li a {
display:block;
color:#333333;
background-color: #FFFFFF;
}

.menu ul li:hover ul li a:hover {
color:#FFFFFF;
background:#003399;
}

Code (markup):

Thanks

 

I am in hurry so don't have much time to test on your code, but from what i see, your problem sits in the positioning, i would digg on that better to find the solution.