Drop down menu not dropping

@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.

It would be better if you could show a live example, or at least post a working page with the HTML and CSS together. Other than that, I notice that you have

position:: relative;

at one point, which is a typo, and also I’m pretty sure you can’t use :hover more than once in a selector:

#nav ul li:hover ul li a:hover

Thank you for your help. here is a link

the chef

rollover products

As the nested list items are floated that means the nested list items are also floated so makes sure you give them the appropriate width and clear them (or not float the nested lists.)


#nav li li{
    width:152px;
    clear:left
}

Careful with your code as you have typos creeping in.

Missing closing bracket before the next rule:


#nav ul li:hover {
    background: #6cf;
#nav ul li:hover ul li a:hover {
background:#6cf;
}


Two colons instead of one:


position:: relative;


Always run your code through the validator to catch simple typos.

No that’s fine Ralph :slight_smile: You can use as many as you need.

Thank you!