Hi all.

Thanks to this forum I have now designed my site which I am very happy with, but there is only final touch that I am having a problem with.

http://pokerslice.net/random/navigation.html

I am trying to create a drop down menu for the navigation.

I have spent the last 2 hours going over tutorials and I still can't get my head around what I am doing wrong.

I have already converted my html template to my wordpress site, and it seems for drop down menus they use the class "sub-menu" to style it.
What I have gathered is that this sub-menu class applied to the sub <ul> should be display:none and then on hover it should display:block.
I tried all this and spent hours trying to figure it out as nothing was working.

I have uploaded a snippet of my navigation area above and would appreciate if anyone could take a look.

Code:
<!DOCTYPE html>
<html>

<head>
	<meta charset='UTF-8' />
	
	<title>Test</title>
	
	<link rel='stylesheet' href='new.css' />


	<style type="text/css">
* { margin: 0; padding: 0; }
body { font-family: Georgia, serif; background: #bababa; font-size:10px;}
li  {list-style: none;
float:left;}

/*Main Navigation Bar-------------------------------*/
#nav_main{
background:url(navmain.png) 0 0 repeat-x;
width:1000px;
height:30px;
border-top: 1px solid #3b3b3b;
border-bottom:1px solid #3b3b3b;
font-size:1.5em;
line-height:1.4em;
font-family:arial;
font-weight:bold;
color: white;
text-transform:uppercase;
margin:0 auto;
}
#nav_main ul {
padding-top:4px;
float:left;
margin-left:40px;
}
#nav_main li {
padding-right: 2em;
}

/*Menu list styling*/
#mainMenu {
	clear:both;
	zoom:1;
	text-align:left;
	text-transform:uppercase;
}
#mainMenu a {
	color:#DEF;
	text-shadow:0 0 2px #004;
	text-decoration:none;
}

#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
	color:#FFF;
	text-shadow:0 0 4px #04C;
}
#nav_main ul ul.sub-menu {
position:absolute;
float:left;
}


	</style>

</head>

<body>


<!-- Navigation Main Start-->	
						<div id="nav_main">
								<ul id="mainMenu">
									<li><a href="#">Home</a></li>
										<ul class="sub-menu">
											<li>Home Sub Menu1</li>
											<li>Home Sub Menu2</li>
											<li>Home Sub Menu3</li>
										</ul>	

									<li><a href="#">About</a></li>
										<ul class="sub-menu">
											<li>About Sub Menu1</li>
											<li>About Sub Menu2</li>
											<li>About Sub Menu3</li>
										</ul>
									
									
								</ul>
																
						</div>
<!-- Navigation Main End -->	


</body>

</html>

It is very confusing, I have tried altering the nav_main ul ul li properties but nothing came out right, and I need to use the sub-menu class for wordpress to read it.

A few people suggested just using javscript or a wordpress plugin for dropdowns but I would really rather not take any shortcuts and learn how it's done properly.