IE doesn't allow click on hover over on drop down menu

[ajr901]

PLEASE SOMEONE HAVE SOME MERCY ON ME AND HELP ME OUT!

I have a page im testing/building over at http://adrianobatista.co.cc/ie/ and when you hover over "valves" it shows the drop down which is "smaller valves" and "larger valves." However, it wont allow you to click the freaking items. It just wont i dont freaking know why. Its making me very angry. In firefox, opera, chrome, and safari, you hover over it and it shows the drop down, and you can click the items. Not in IE for some reason. Im using a simple bit of CSS to make the bg image fill the whole browser

<style>
body, html { margin:0; padding:0; height:100%; width:100%; }
#bgimage {position:fixed; left:0; top:0; z-index:1; height:100%; width:100%; }
#content {position:absolute; left:0; top:0; z-index:70; height:100%; width:100%; }
</style>

And the img and content goes inside of a table. the content inside of a <div>

<div>
	<table cellspacing="0" cellpadding="0">
    	<tr>
        	<td>
            	<img id="bgimage" src="images/1234.png" />
                <div id="content">
                
                <span style="float:left; padding-right:5%"><a href="index.html"><img src="images/greenvalve usa_r2_c2_s1.png" alt="GreenValve LOGO" border="0"/></a></span>
<!-- Start CSS MENU -->
<span class="pureCssMenui"><a class="pureCssMenui" href="index.html"><span style="float:left; padding-right:55px"></span></a></span>
<ul class="pureCssMenu pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="index.html">HOME</a></li>
	<li class="pureCssMenui"><a class="pureCssMenui" rel="shadowbox;width=700%" href="/mf/view.php?id=1">CONTACT</a></li>
<li class="pureCssMenui"><a class="pureCssMenui " href="#"><span>VALVES</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="pureCssMenum">
		<li class="pureCssMenui"><a class="pureCssMenui " href="valves1.html">Smaller Valves</a></li>

		<li class="pureCssMenui"><a class="pureCssMenui" href="valves2.html">Larger Valves</a></li>
  </ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="demo.html">HOW DOES IT WORK?</a></li>
</ul>
</div>
            </td>
        </tr>
     </table>
</div>

the menu's css is

a.active:link{
	
	color: #0065c3;
	}


#pcm{display:none;}
ul.pureCssMenu ul{display:none}
ul.pureCssMenu li:hover>ul{display:block}
ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;}
ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}
ul.pureCssMenu,ul.pureCssMenu ul {
	margin:0px;
	list-style:none;
	padding:0px 2px 2px 0px;
	border-style:none;
}
ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
	display:block;
	zoom:1;
	float: left;
}
ul.pureCssMenu ul{
	width:101.85000000000001px;
}
ul.pureCssMenu li{
	display:block;
	margin:1px 0px 0px 3px;
	font-size:0px;
}
ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
outline-style:none;

}
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
	display:block;
	vertical-align:middle;
	border-width:0px;
	border-color:#6655ff;
	border-style:none;
	text-align:left;
	text-decoration:none;
	padding:6px;
	_padding-left:0;
	font:normal 15px Verdana;
	font-weight:bold;
	color: #69a90e;
	text-decoration:none;
	cursor:default;
}
ul.pureCssMenu span{
	overflow:hidden;
}
ul.pureCssMenu li {
	float:left;
}
ul.pureCssMenu ul li {
	float:none;
}
ul.pureCssMenu ul a {
	text-align:left;
	white-space:nowrap;
}
ul.pureCssMenu li.sep{
	text-align:center;
	padding:0px;
	line-height:0;
	height:100%;
}
ul.pureCssMenu li.sep span{
	float:none;	padding-right:0;
	width:5;
	height:16;
	display:inline-block;background-image:none;}
ul.pureCssMenu ul li.sep span{
	width:80%;
	height:3;
}
ul.pureCssMenu li:hover{
	position:relative;
	
}
ul.pureCssMenu li:hover>a{
	border-color:#665500;
	border-style:none;
	font:normal 15px Verdana;
	font-weight:bold;
	color: #0065c3;
	text-decoration:none;
	
}
ul.pureCssMenu li a:hover{
	position:relative;
	border-color:#665500;
	border-style:none;
	font:normal 15px Verdana;
	font-weight:bold;
	color: #0065c3;
	text-decoration:none;
}
ul.pureCssMenu li.dis a {
	color: #AAAAAA !important;
}

ul.pureCssMenu ul img {width:16px;
height:16px;
}
ul.pureCssMenu img.over{display:none}
ul.pureCssMenu li.dis a:hover img.over{display:none !important}
ul.pureCssMenu li.dis a:hover img.def {display:inline !important}
ul.pureCssMenu li:hover > a img.def  {display:none}
ul.pureCssMenu li:hover > a img.over {display:inline}
ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over{display:inline}
ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def{display:none}
ul.pureCssMenu a:hover ul{display:block}
ul.pureCssMenu span{
	display:block;
	padding-right:11px;
	font-family: Verdana;
}

[teedoff]

You do have a couple of coding validation errors. Not saying thats the problem, but IE is very picky when it comes to correct code. One in particular is the <style> tag for your embedded CSS. I think the opening style tag should be
<style type="text/css">

style rules here

</style>