Forums

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:

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

<li>
<a href=\"http://reformingtoscripture.com/\">About</a>
</li>
<li>
<a href=\"http://reformingtoscripture.com/\">Resources</a>
<ul class=\"mysubmenu\">
<li>
<a href=\"http://reformingtoscripture.com/\">Sermons</a>
</li>
<li>
<a href=\"http://reformingtoscripture.com/\">Articles</a>
</li>
</ul>
</li>

Then in your css file:


.mysubmenu li {
  clear:both;
  width:100px; /* set the width so your submenu items are all the same width */
}

You could also do this inline


<li style=\"clear: both; width: 100px;\">
<a href=\"http://reformingtoscripture.com/\">Sermons</a>
</li>
<li style=\"clear: both; width: 100px;\">
<a href=\"http://reformingtoscripture.com/\">Articles</a>
</li>

But if you're going to have multiple submenus, use a class so you won't have to type out the inline code for each item.

hornj

Thanks a lot!

noahgelman

I'm pretty sure you can just do this:


#navigation li {
   float: none;
}

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

treehouse : what would you like to learn today?

Forums

CSS Dropdown menu problems