Hi,
Make sure you have a full valid doctype or IE will struggle with this anyway.
The main problem with IE6 and 7 is that they don't like auto positions for absolute elements so you need to use top:30px and left:0 instead of auto.
IE6 isn't working because you omitted the sfhover javascript and it needs that to work plus you have the sfhover rules incorrect anyway 
IE6 doesn't understand the child selector either so lose that as its not needed here anyway.
Most of your classes are redundant as they can be handled via context and aren't really needed.
You can't use the same id twice as ids must be unique and indeed a menu like that should be one list and not two separate lists. It will fail in IE6 if you use two lists anyway because the javascript will only find one of the ids and not the other.
A table is not necessary for a dropdown menu and indeed complicates the whole process. The button element doesn't really seem the right element to use here either.
Here is the code tidied up and working from ie6 upwards.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<!--[if lt IE 7]>
<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("cssdropdown").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<![endif]-->
<style type="text/css">
/*###### Start Menu CSS ######*/
p {
margin:0
}
#cssdropdown, #cssdropdown ul {
padding:0;
margin: 0;
list-style: none;
z-index:999;
}
#cssdropdown li {
float: left;
position: relative;
z-index:999;
}
#cssdropdown li ul {
top: 30px;
position: absolute;
margin: 0px;
padding: 2px;
width:15em;
left: -999em;
border-left:solid #000000 1px;
background:#600;
}
#cssdropdown li:hover ul, #cssdropdown li:focus ul, #cssdropdown li.sfhover ul {
left: 0;
}
/* Root link formatting */
#cssdropdown li a {
display: block;
padding-right: 0px;
text-decoration: none;
font-weight:bold;
color: #FDED8F;
}
#cssdropdown li a:hover {
color: black;
font-size: 9pt;
}
/* Menu link formatting */
#cssdropdown li li {
float:left;
clear:left;
width:100%
}
#cssdropdown li li a {
display: block;
margin: 0;
padding:3px 3px 3px 6px;
background: #600;
font-weight: normal;
font-size: 9pt;
color: white;
position:relative;
}
/* Menu link hover formatting */
#cssdropdown li li a:hover {
display: block;
background: #900;
color: white;
}
#restofcontent { /*wrap rest of content of the page inside this div*/
clear: left;
}
/*###### End Menu CSS ######*/
#cssdropdown li p,#cssdropdown li p a {
background: url(http://www.freewebsitebuttons.com/action_buttons/buy_orange.jpg) 0 0 no-repeat;
height:30px;
width:232px;
border: none;
padding: 0;
}
#cssdropdown li p {background: url(http://www.freewebsitebuttons.com/action_buttons/buy_now.jpg) 0 0 no-repeat;}
#cssdropdown li p a a:hover {background:transparent;}
</style>
</head>
<body>
<ul id="cssdropdown">
<li>
<p><a href="#" ></a></p>
<ul>
<li><a href="/article/test.aspx">Test Dropdown 1</a></li>
<li><a href="/article/test.aspx">Test Dropdown 2</a></li>
<li><a href="/article/test.aspx">Test Dropdown 3</a></li>
<li><a href="/article/test.aspx">Test Dropdown 4</a></li>
</ul>
</li>
<li>
<p><a href="#"></a></p>
<ul>
<li><a href="/article/test.aspx">Test Dropdown 1</a></li>
<li><a href="/article/test.aspx">Test Dropdown 2</a></li>
<li><a href="/article/test.aspx">Test Dropdown 3</a></li>
<li><a href="/article/test.aspx">Test Dropdown 4</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Hope that helps
Reply With Quote
Bookmarks