How do I get my dropdown navigation menu to work using CSS?

I have a simple menu in my navigation div at the top of my website, consisting of a <ul> with several <li>s that float left. Then I have a nested set of <ul>s and <li>s that are hidden, that I want to appear when the user hovers over the first set of <li>s. My CSS code below isn't working. It's causing all the buttons and sub-buttons to float left, and nothing is ever hidden. Any idea what is wrong below?


.menuSectionDiv li{float:left; position:relative;}
.menuSectionDiv li ul{position:absolute; display:none; top:35px; left:0;}
.menuSectionDiv li ul li{float: none;}
.menuSectionDiv li:hover ul{display:block;}

<div class="menuSectionDiv">
		<ul>
			<li><a href="#"><span id="homeButton">Home</span></a></li>
			<li><a href="#"><span id="servicesButton">Services</span></a></li>	
				<ul>
					<li><a href="#"><span id="">Item1</span></a></li>
					<li><a href="#"><span id="">Item2</span></a></li>	
					<li><a href="#"><span id="">Item3</span></a></li>
					<li><a href="#"><span id="">Item4</span></a></li>
				</ul>			
			<li><a href="#"><span id="aboutButton">About</span></a></li>
				<ul>
					<li><a href="#"><span id="">Item1</span></a></li>
					<li><a href="#"><span id="">Item2</span></a></li>	
					<li><a href="#"><span id="">Item3</span></a></li>
					<li><a href="#"><span id="">Item4</span></a></li>
				</ul>	
			<li><a href="#"><span id="contactButton">Contact</span></a></li>
				<ul>
					<li><a href="#"><span id="">Item1</span></a></li>
					<li><a href="#"><span id="">Item2</span></a></li>	
					<li><a href="#"><span id="">Item3</span></a></li>
					<li><a href="#"><span id="">Item4</span></a></li>
				</ul>				
		</ul>
</div> 

Select allOpen in new window