Missing something, but not sure what in nav

HTML & CSS
1

I cannot figure out what I’m missing to get the blue to extend to the right of the last link, “Contact Us” to finish out the menu. Any help would be appreciated.

jodmcc



<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8">
		<meta name="generator" content="Adobe GoLive">
		<title>Renegades Cooking Team, Houston, Texas - Team Members</title>
	</head>

	<body id="home">
	<div id="wrap">
	<div id="header">
				<img src="../images/page_header_2010.png" alt="" height="150" width="800" border="0"></div>
	<div id="nav">
	<ul id="menu">
       <li id="menu-home"><a href="#">Home</a></li>
       <li id="menu-members"><a href="#">Members</a></li>
       <li id="menu-packages"><a href="#">Underwriter Packages</a></li>
       <li id="menu-underwriters"><a href="#">Underwriters</a></li>
       <li id="menu-contact"><a href="#">Contact Us</a></li>
    </ul>
	<ul id="submenu">
		<li><a href="#" target="_blank">2000</a></li>
		<li><a href="#" target="_blank">2001</a></li>
		<li><a href="#" target="_blank">2002</a></li>
		<li><a href="#" target="_blank">2003</a></li>
		<li><a href="#" target="_blank">2004</a></li>
		<li><a href="#" target="_blank">2005</a></li>
		<li><a href="#" target="_blank">2006</a></li>
		<li><a href="#" target="_blank">2007</a></li>
		<li><a href="#" target="_blank">2008</a></li>
		<li><a href="#" target="_blank">2009</a></li>
		<li><a href="#" target="_blank">2010</a></li>
</ul>
</div><!--end bodycontent--></div>
	</body>
</div>
</html>

CSS:

<style type="text/css" media="all">
#wrap { width: 800px; border: solid 1px black; overflow: hidden; }
body  { font-family: helvetica, arial, sans-serif; font-size: 1em; }
#header   { }
#bodycontent  { padding-right: 10px; padding-left: 10px }
#nav  { overflow: hidden }
#menu  { margin: 0; padding: 0; width: 100%; float: left; border-style: solid; border-width: 1px 0; border-color: #42432d; bacground: #ce4eef }
#menu li { display:inline; margin:0; padding:0; }
#menu a:link, #menu a:visited { color: #000000; background: #ce4eef; padding: 20px 10px 4px 10px; float: left; width: auto; border-right: 1px solid #42432d; text-decoration: none; font: bold 1em/1em Arial, Helvetica, sans-serif; text-transform: uppercase; text-shadow: 2px 2px 2px #555555; }
#menu li:first-child a { border-left: 1px solid #42432d; }
#menu a:hover, #menu a:focus { color: #ffffff; background: #4ebeef; }
#home #menu-home a, #members #menu-members a, #packages #menu-packages a, #underwriters #menu-underwriters a, #contact #menu-contact a { background: #ef7e4e; color: #ffffff; text-shadow: none; }
#home #menu-home a:hover, #members #menu-members a:hover, #packages #menu-packages a:hover, #underwriters #menu-underwriters a:hover, #contact #menu-contact a:hover { background: #ef7e4e; }
#menu a:active {background: #ef7e4e; color: #ffffff; }

#submenu {
	float: left;
	list-style: none;
	margin: 10px 0 10px 10px;
	padding: 0;
}

#submenu li {
	float: left;
	margin-right: 25px;
}
#submenu a:link, #submenu a:visited { text-decoration: none }
#submenu a:hover, #submenu a:focus { text-decoration: underline }
#membersleft   { font-weight: bold; list-style-type: none; display: inline; margin: 0 0 0 4%; width: 23%; float: left }
#memberscenter   { font-weight: bold; list-style-type: none; margin: 0 0 0 4%; width: 23%; float: left }
#membersright   { font-weight: bold; list-style-type: none; margin: 0 0 0 4%; width: 23%; float: left }
</style>
2

Thanks for the help Paul! That was it. I can’t believe I didn’t see it. :slight_smile:

3

Hi,
You’re not talking about the missing k in the background property here are you.


#menu {
    margin: 0;
    padding: 0;
    width: 100&#37;;
    float: left;
    border-style: solid;
    border-width: 1px 0;
    border-color: #42432d;
    [B]background: #ce4eef[/B]
}