[RESOLVED] please test code, see whats wrong

i dont care how much i stole, i am just trying to learn, why do these drop boxes not work in IE?
works in firefox
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>The Jello Mold</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">

/* Jello */
body {

padding: 0 350px 0 350px; /* these side paddings together determine the natural min-width */
margin: 0;
text-align: center; /* this centers the wrappers in older IEwin versions */
background: gray;
behavior:url(htc/csshover.htc);
}
* {margin:0; padding:0;}
#sizer {
margin: 0 auto 0 auto; /* this centers the wrappers in standards browsers */
width: 50%; /* here is the critical value for customizing the Jello behavior */
max-width: 300px; /* version for IE is at the bottom of this style block */
}

#expander {
background: white;
margin: 0 -350px 0 -350px; /* these side margins should be the same or slightly less than body paddings */
min-width: 700px; /* This prevents Safari from losing the negative margins in narrow windows */
position: relative;
}

/* Holly hack for IE. Must be zero, not the usual 1% value, due to IE bug \*/
* html #expander { height: 0; }
/* */

/* helps IE get the child percentages right. */
#wrapper { width: 100%; }

/* * * * * * * * * * * * * * * * * */

#sidebar {
width: 20%;
float: left;
display: inline; /* IEwin doubled margin bug fix */
text-align: left;
margin-left: 6%;
margin-top: 20px;
z-index: 9;
}

#content {
width: 62%;
margin-right: 8%;
text-align: left;
float: right;
display: inline; /* IEwin doubled margin bug fix */
}

#relativeheader {}

#header {
width: 100%;
float: left;
background-color: #ccf;
}
#menucontsiner {
position: absolute;
}

/* http://positioniseverything.net/easyclearing */

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
/* the horizontal menu starts here */
div#listmenu {
width:100%; /* makes the div full width */
float:left; /*makes the div enclose the list */
border-top:1px solid #069; /* draws line on top edge of div */
border-bottom:1px solid #069; /* draws line on bottom edge of div */
font-size:.8em; /* SET FONT-SIZE HERE */
background-color:#CCF; /* colors the div */
margin-top:20px; /* TEMPORARY - pushes the div away from the top of the browser for clarity in this example*/
}
div#listmenu ul {margin:0 0 0 30px;/* indents ul from edge of container */
}
div#listmenu li {
float:left; /* causes the list to align horizontally instead of stack */
position:relative; /* positioning context for the absolutely positioned drop-down */
list-style-type:none; /* removes the bullet off each list item */
background-color:#FFA; /*sets the background of the menu items */
border-right:1px solid #069; /* creates dividing lines between the li elements */
}
div#listmenu li:first-child {
border-left:1px solid #069; /*the first vertical line on the menu */
}
div#listmenu li:hover {
background-color:#FFF; /*sets the background of the menu items */
}
div#listmenu a {
display:block;
padding:0 6px; /*creates space each side of menu item's text */
text-decoration:none; /* removes the underlining of the link */
color:#069; /* sets the type color */
}
div#listmenu a:hover {
color:#F33;
}
/* the horizontal menu ends here */

/* the drop-down starts here */
div#listmenu ul li ul {
margin:0; /* prevents the TEMP value inheriting from the horiz menu - OK to remove if you remove TEMP above */
position:absolute; /* positions the drop-down ul in relation to its relatively positioned li parent */
width:10em; /*sets the width of the menu - in combo with the li's 100% width, makes the menu stack*/
left:-1px; /*aligns the drop exactly under the menu */
}
div#listmenu ul li ul li {
width:100%; /* makes the list items fill the list container (ul) */
border-left:1px solid #069; /* three sides of each drop-down item */
border-bottom:1px solid #069;
border-right:1px solid #069;
}
div#listmenu ul li ul li:first-child {
border-top:1px solid #069; /*the top edge of the dropdown */
}
/* make the drop-down display as the menu is rolled over */
div#listmenu ul li ul {display:none;} /* conceals the drop-down when menu not hovered */
div#listmenu ul li:hover ul {display:block; } /* shows the drop-down when the menu is hovered */

/* THE HACK ZONE - */
/* hack for IE (all flavors) so the menu has a vertical line on the left */
* html div#listmenu ul {
float:left; /* makes the ul wrap the li's */
border-left:1px solid #000; /* adds the rightmost menu vertical line to the ul */
margin-left:15px; /* IE doubles the given value above - why? */
}
* html a {display:block;} /* makes IE5 & 5.5 accept the padding on the link */
/* add a top line to drops and pops in IE browsers - can't read :first-child */
* html div#listmenu ul li ul {
border-top:1px solid #069;
border-left:0px; /* stops the drop inheriting the ul border */
}
/* end of hack zone */
/* END OF LIST-BASED MENU */
</style>





</head>

<body>

<div id="sizer">
<div id="expander">
<div id="wrapper" class="clearfix">

<div id="relativeheader">
<div id="header">
Your mother is a hampster
<div id="menucontainer" class="clearfix">
<div id="listmenu">
<ul>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Plumbing</a></li>
<li><a href="#">Construction</a></li>
<li><a href="#">Pressure Washing</a></li>
</ul>
</li>
<li><a href="#">Members</a></li>
<li><a href="#">Dealers</a></li>
<li><a href="#">Distributors</a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="content">
<p><a href="../jello-expo.html">Return to Jello Mold Explanation</a></p>
<p><a href="../jello.html">Return to Jello Mold Piefecta</a></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque quis dolor id risus congue rhoncus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla elementum urna in velit. Integer vel ipsum. Quisque eget tellus. Phasellus rhoncus, libero et tristique euismod, sem wisi imperdiet felis, vitae dignissim diam erat sed nisl. Nunc rutrum erat ut wisi. Ut neque purus, ullamcorper quis, placerat at, molestie id, sapien. Mauris in pede. Donec tincidunt fermentum turpis. Sed dapibus, nisl at aliquam dapibus, augue lorem varius lorem, nec egestas turpis urna in metus. Suspendisse vulputate. Sed sit amet lacus. Nulla sem tellus, sagittis sodales, gravida gravida, egestas fermentum, est.</p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Praesent vel tellus. Aenean pede odio, condimentum ornare, convallis in, ornare non, dui. Sed diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Fusce faucibus leo ut lorem. Donec tempus. Donec at arcu eget eros luctus tempus. Proin porta consequat metus. Nunc faucibus lobortis odio. Ut tincidunt, arcu quis sollicitudin cursus, diam arcu eleifend nunc, id fringilla erat mi sed urna. Fusce porta sapien nec quam. Nam pede erat, aliquam sed, vestibulum sed, auctor in, enim.</p>

<p>Maecenas ultrices augue id ante. Nulla hendrerit est non nulla. Vestibulum orci mauris, mattis sit amet, mollis eget, aliquam at, ipsum. Aliquam erat volutpat. Curabitur mauris. Pellentesque augue lorem, elementum eget, egestas ultrices, molestie a, odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut pede augue, euismod ac, sodales et, vulputate vitae, dolor. Fusce lorem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut nonummy sapien sed lacus.</p>
</div>
<div id="sidebar">
<p>Integer purus. Nulla laoreet, felis et tristique laoreet, felis elit sollicitudin magna, id tincidunt dui ligula vitae arcu. Nulla ac felis. Donec quis augue id ligula faucibus pharetra. In gravida pharetra neque.</p>
<p>Nunc malesuada, odio vitae lobortis blandit, erat lacus fringilla quam, eget tincidunt dolor arcu sed pede. Nulla in mi. Ut cursus urna at lectus. Fusce dictum justo non velit. Vestibulum mauris nulla, porta sed, suscipit at, vehicula vitae, mauris. Curabitur faucibus dolor a dolor. Aenean velit. Nam hendrerit massa in orci elementum tincidunt. Quisque lobortis wisi vitae erat. Proin enim. Donec tincidunt augue nec mauris.</p>
</div>
</div>

</div>
</div>

</body>
</html>
[/body]