Code:
@charset "UTF-8";
#wrapper {
width: 990px;
height: 560px;
background-color: #8e536f;
margin:auto;
}
#header {
}
#nav{
}
#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: #f96;
}
#nav ul li a {
text-align: center;
font-family:Tahoma, Geneva, sans-serif;
text-decoration:none;
height: 30px;
width: 150px;
display:block;
color: #fff;
border:1px solid #fff;
}
#nav ul ul{
position:absolute;
visibility: hidden;
}
#nav ul li:hover ul{
visibility: visible;
}
#nav ul li:hover {
background: #6cf;
#nav ul li:hover ul li a:hover {
background:#6cf;
}
.clearFloat {clear:both;
margin: opx;
padding: 0px;
}
#content {
width: 990px;
height: 560px;
background-image:url(source_files/images/TheChef.jpg);
}
#footer {
	
}
When I rollover it it goes inline and not drop down. Any help would be appreciated. I'm hoping it easy and something I am over looking.