Css drop down menu

1

Hey guys,

I have been working on a drop down menu all day, and so far I have this code (below) and for some reason the drop downs are using part of the main <li>'s CSS properties, cause when try and change one thing for the drop down, the main <li> gets affected. What am I missing? Here is the code:

#menu{
	padding:0;
	margin:0;
	padding-left:270px;
}
#menu ul{
	padding:0;
	margin:0;
}
#menu li{
	position: relative;
	float: left;
	list-style: none;
	margin: 0;
	padding:0;
}
#menu li a{
	padding-left:8px;
	padding-right:8px;
	padding-bottom:10px;
	padding-top:12px;
	display: block;
	color:#FFFFFF;
	text-decoration:none;
}
#menu li a:hover{
	padding-left:8px;
	padding-right:8px;
	padding-bottom:10px;
	padding-top:12px;
	display: block;
	color:#203557;
	background-color:#fff;
	text-decoration:none;
}
#menu li ul{
	position: absolute;
	width: 180px;
	visibility:hidden;
}
#menu li ul a{
	color:#203557;
	background-color:#fff;
}
#menu li:hover ul, #menu li.hover ul{
	visibility:visible;
	font-size:12px;
	color:#203557;
	background-color:#fff;
}