CSS Dropdown menu problems

[hornj]

Hello,

I am learning CSS, and I am having some problems with a drop down menu for a website I am working on.

http://reformingtoscripture.com/test/

For the drop down (only resources right now) it does not put them on top of each other even though I say display:block. What am I missing?

Here is the code:

Code:

.file #navigation {
width:780px;
background:#EAE7DF url(http://i254.photobucket.com/albums/hh92/eblogtemplates/naturalessence/nanav.gif) repeat;
height:41px;
border-top:1px solid #996
}

.file #navigation ul {
padding:0;
margin:0;
background-color:#F66;
}

.file #navigation li {
float:left;
list-style:none
}

.file #navigation li a{
background:#FFF url(http://i254.photobucket.com/albums/hh92/eblogtemplates/naturalessence/nanav.gif) repeat-x;
border-right:1px solid #C9C6B3;
color:#553;
display:block;
line-height:41px;
padding:0 14px;
text-align:center;
text-decoration:none;
font-size: 11pt;
font-weight:bold;
font-family: Tahoma, Geneva, sans-serif;
}

.file #navigation li ul {
display: none;
}

.file #navigation ul li a {
display: block;
}

.file #navigation li:hover ul
{
display: block;
}

.file #navigation a:hover{
background-position:left bottom;
color:#221;
}

Thanks for any help.

[JaredAM]

Howdy,

The problem is that your submenu li is inheriting the float:left from the top menu li.

To fix this you can create a new class for your submenu and "clear" the float:

Code:

[hornj]

Thanks a lot!

[noahgelman]

I’m pretty sure you can just do this:

Code:

#navigation li {
float: none;
}

Can’t you? It stops the inheritance of the float and makes it back into a list.

[Author]

Posts