I need to put a simple css drop menu within a div table cell.

Note that I'm using the table cells as a workaround of CSS's inability to control vertical alignment in float divs, and I need to use those because the page is built from a matrix of divs that are dynamically generated so I have no way to predict their length. If you have an alternative that doesn't involve complex after load redraws with javascript, I'm happy to hear it.

The menu is not displaying within the cell (perhaps indicating that CSS/HTML doesn't want to recognise this structure?), and when it does display, the sublists aren't properly aligned.

Here is the CSS
HTML Code:
<style type="text/css">

	ul {
	font-family: Arial, Verdana;
	font-size: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
	}
	ul li {
	display: block;
	position: relative;
	float: left;
	}
	li ul {
	display: none;
	}
	ul li a {
	display: block;
	text-decoration: none;
	color: #ffffff;
	border-top: 1px solid #ffffff;
	padding: 5px 15px 5px 15px;
	background: #1e7c9a;
	margin-left: 1px;
	white-space: nowrap;
	}
	ul li a:hover {
	background: #3b3b3b;
	}
	li:hover ul {
	display: block;
	position: absolute;
	}
	li:hover li {
	float: none;
	font-size: 11px;
	}
	li:hover a { background: #3b3b3b; }
	li:hover li a:hover {
	background: #1e7c9a;
	}
</style>
Here is the HTML
HTML Code:
<div style='display:table'>
	<div style='display:table-row; '>
		<div style='display:table-cell; 18px;  text-align:left;'>
			<ul id="menu">
				<li><a href="#">Home</a></li>
				<li><a href="#">About</a>
				    <ul>
					   <li><a href="#">First Item</a></li>
					   <li><a href="#">Second Item</a></li>
					   <li><a href="#">Third Item</a></li>
				    </ul>
				</li>
				<li><a href="#">Products</a>
				    <ul>
					   <li><a href="#">Typing Gizmo</a></li>
					   <li><a href="#">Water Cannon</a></li>
					   <li><a href="#">Laser Gun</a></li>
					   <li><a href="#">Submarine</a></li>
					   <li><a href="#">Invisibility Cloak</a></li>
				    </ul>
				</li>
				<li><a href="#">Contact</a>
				    <ul>
					   <li><a href="#">Email</a></li>
					   <li><a href="#">Skype</a></li>
					   <li><a href="#">The Old Fashioned Way</a></li>
				    </ul>
				</li>
			 </ul>
		</div>
	</div>
</div>
Any suggestions?