ul extends past container

[doofy]

The organized inline list is extending past my container. I've gotten this far to trouble shoot it, but have no clue how to fix this css. Any direction would be appreciated, I thought it was a padding issue from everything I've read, but I couldn't figure out how to fix this.

 

Thank you in advance for helping a css n00b.

 

ul, li {
font-size:12px;
font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
line-height:21px;
text-align:left;
}
#container{
margin:0 auto;
width:990px;
}
#menu {
z-index:1;
list-style:none;
width:940px;
margin:30px auto 0px auto;
height:43px;
padding:0px 20px 0px 20px;
/* Rounded Corners */

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background: #000000;

/* Borders */

border: 2px solid #3a3a3a;
-moz-box-shadow:inset 3px 3px 4px #000000;
-webkit-box-shadow:inset 3px 3px 4px #000000;
box-shadow:inset 3px 3px 4px #000000;
}
#menu li {
float:left;
display:block;
text-align:center;
position:relative;
padding: 4px 10px 4px 10px;
margin-right:30px;
margin-top:7px;
border:none;
}
#menu li:hover {
border: 1px solid #3a3a3a;
padding: 4px 9px 4px 9px;
background: #000000;

/* Rounded corners */

-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}
#menu li a {
font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color: #bb7f2a;
display:block;
outline:0;
text-decoration:none;
}
#menu li:hover a {
color:#bb7f2a;
text-decoration:underline;
}
#menu li .drop {
padding-right:21px;
background:url("../images/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
background:url("../images/drop.png") no-repeat right 7px;
}
.dropdown_1column
{
margin:4px auto;
float:left;
position:absolute;
left:-999em; /* Hides the drop down */
text-align:left;
padding:10px 5px 10px 5px;
border:1px solid #3a3a3a;
border-top:none;

/* Gradient background */
background:#000000;
/* Rounded Corners */
-moz-border-radius: 0px 5px 5px 5px;
-webkit-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
}
.dropdown_1column {
width: 140px;
}
#menu li:hover .dropdown_1column {
left:-1px;
top:auto;
}
.col_1 {
width:130px;
display:inline;
float: left;
position: relative;
margin-left: 5px;
margin-right: 5px;
}
#menu .menu_right {
float:left;
}
#menu li .align_right {
/* Rounded Corners */
-moz-border-radius: 5px 0px 5px 5px;
   -webkit-border-radius: 5px 0px 5px 5px;
   border-radius: 5px 0px 5px 5px;
}
#menu li:hover .align_right {
left:auto;
right:-1px;
top:auto;
}
#menu p, #menu h2, #menu h3, #menu ul li {
font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
line-height:21px;
font-size:12px;
text-align:left;
}
#menu li:hover div a {
font-size:12px;
color:#FFF;
}
#menu li:hover div a:hover {
color:#029feb;
}
.strong {
font-weight:bold;
}
.italic {
font-style:italic;
}
#menu li ul {
list-style:none;
padding:0;
margin:0 0 12px 0;
}
#menu li ul li {
font-size:12px;
line-height:24px;
position:relative;
padding:0;
margin:0;
float:none;
text-align:left;
width:130px;
}
#menu li ul li:hover {
background:none;
border:none;
padding:0;
margin:0;
}
#searchcontainer {
position:relative;
}
#search {
position:absolute;
top:-35px;
right:35px;
}

[Zane]

A screenshot would be helpful.. or a link to the actual site of this problem. Otherwise, we will have to create our own HTML to go along with your CSS.. and that could take quite some time.

[denno020]

I would suggest to check that your floats are cleared.

 

Also if you want your container to be a specific height but the content within it can be longer, then you'd need to set overflow correctly to allow the content to be scrolled in the container.

 

Denno

[doofy]

Sorry about that guys.. Thank you very much for the quick replies though, already I feel like I'll get through this issue.

 

<div id="container">
<ul id="menu">

   <li><a href="main.php">Home</a></li>
<li class="menu_right"><a href="profile.php" class="drop">My Check List</a>

 <div class="dropdown_1column align_right">

		    <div class="col_1">

			    <ul class="simple">
				    <li><a href="add-goal.php">Add a Goal</a></li>
				    <li><a href="profile.php">My Profile</a></li>
				    <li><a href="edit-profile.php">Edit Profile</a></li>
				    <li><a href="settings.php">Account Settings</a></li>
			    </ul>  

		    </div>

 </div>

 </li>

  <li class="menu_right"><a href="activity.php">Member Activity</a></li>
<li class="menu_right"><a href="about.php" class="drop">About</a>

 <div class="dropdown_1column align_right">

		    <div class="col_1">

			    <ul class="simple">
				    <li><a href="about.php">About Us</a></li>
				    <li><a href="contact.php">Contact Us</a></li>
				    <li><a href="faq.php">FAQ</a></li>
				    <li><a href="terms.php">Terms & Conditions</a></li>
				    <li><a href="privacy.php">Privacy Statement</a></li>
			    </ul>
	  </div>
</div>
  </li>
</ul>
<table width="100%" border="0" cellspacing="0" cellpadding="2">
 <tr>
   <td><div id="contentbox">content</div></td>
   <td><div id="contentbox">content</div></td>
 </tr>
</table>
</div>

[kicken]

Either I'm not understanding where the issue is, or it seems to be solved.  The menu fits within your container just fine when I put the code into a fiddle and look at it:

http://jsfiddle.net/SeYFm/

 

Perhaps you should post a screenshot showing the problem so we can literally see it.

 

[doofy]

Sorry, it was late last night. I meant it expands my container. Before without the menu.css it was 990px wide, now nothing is adhering to the container.

 

Here is a screen shot when zoomed out (Before it worked fine, now with the nav bar it's all screwy, but I can't figure out how to fix the css):

 

[doofy]

Thanks for the help guys, you got me in the right direction.