CSS Dropdown Menu

[afish88]

I am trying to create a CSS menu so that sub-menu items will appear with a hover like a traditional dropdown menu.

I have managed to get this to work in normal HTML fine using this tutorial:
http://www.[youtube].com/watch?v=yz8dZsmL ... plpp_video

However i've used the same CSS in my navigation.css file and the hover element isn't working. I don't really understand why. The top level elements are styled fine. It just won't drop down.

My CSS is:

Code: Select all

#nav{
	margin:0px;
	padding:0px;
}

#nav ul{
	margin:0px;
	padding:0px;
	line-height:30px;
}

#nav li{
	margin:0px;
	padding:0px;
	list-style:none;
	float:left;
	position:relative;
	background:#999;
}

#nav ul li a{
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
	text-decoration:none;
	height:30px;
	width:150px;
	display:block;
	color:black;
	border:1px solid #000;
}

#nav ul ul{
	position:absolute;
	visibility:hidden;
	top:32px;
}

#nav ul li:hover ul{
	visibility:visible;
}

/***********************************************************************************/

#nav li:hover{
	background:#09F;
}

#nav ul li:hover ul li a:hover{
	background:#ccc;
	text-color:black;
}

#nav a:hover{
	color:white;
}

.clearFloat{
	clear:both;
	margin:0px;
	padding:0px;
}

#nav is the name of the div which contains my main menu.

Thanks in advance for your help!