URL: http://tinyurl.com/32qcsac
If you hover over About Us, you should see the 2nd level of the menu. I don’t understand why it’s not showing. I’ve tried adding z-index to the 2nd level ul, but that isn’t working. Help? 
Hi Susan,
The sublist is being clipped because of the overflow:hidden on your #header.
I would probably take a completely different approach to the way your laying out all your header elements. The overflow:auto on #header-right is causing problems too.
The #logo could just be AP’d to the top left to remove it from the flow, that way you would not need to be dragging your menu up with a negative margin.
let me look at it all closer and see if I can find an alternative method for laying everything out. 
Oh my gosh. I knew it would be something silly (overflow: hidden). Thanks for pointing that out.
I had considered using absolute positioning for the logo, but my client does not like using that. I agree - it would be a better solution. I think I’ll try it anyway and see what they say.
Thanks again!
Ha, since when does a client know when it is time to remove an element from the flow. 
I reworked some things for you, you can save these as test.html and test.css and they will run from your root folder.
test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>CCGC Home Page</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<meta name="robots" content="all" />
<meta name="revisit-after" content="5 Days" />
<meta name="copyright" content="" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="Rating" content="General" />
<link rel="stylesheet" href=[B][COLOR=Blue]"css/test.css"[/COLOR][/B] type="text/css" />
<!--[if IE 8]>
<link rel="stylesheet" href="css/ie8-style.css" type="text/css" />
<![endif]-->
</head>
<body>
<div id="wrap">
<div id="header">
<div id="header-right">
<div id="newsletterbox">
<p>SIGN UP FOR OUR E-NEWSLETTER</p>
<p>Email <input class="textbox-signup" type="text" /><input class="button-signup" type="button" value="SEND" /></p>
</div>
<div id="registrationform">
<a href="#"><img src="images/print-form.png" alt="" /></a>
</div>
<p class="clear discount">
Sign your kids up together, receive a<br />
<span class="large">Family Discount.</span><br />
<a class="link" href="#">Learn More</a>
</p>
</div>
<div id="logo">
<a href="#"><img src="images/ccgc-logo.png" alt="#" /></a>
</div>
<div id="navwrap">
<ul id="nav">
<li><a href="#">Classes</a></li>
<li><a href="#">Schedule</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Gym Gallery</a></li>
<li><a href="#">About Us</a>
<ul>
<li><a href="#">Philosophy</a></li>
<li><a href="#">Staff</a></li>
<li><a href="#">Our Gym</a></li>
<li><a href="#">FAQs</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div> <!-- end #header -->
<div id="content">
<div id="right"></div>
<div id="left"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
test.css
/* Screen Stylesheet for
CCGC updated:11/17/10
author:Susan Nelson*/
/* RESETS ====================================== */
body, address, blockquote, dl, ol, ul, li, form, fieldset, h1, h2, h3, h4, h5, h6, p, pre {
margin: 0;
padding: 0;
}
fieldset, table {
border: none;
}
/* DOCUMENT DEFAULTS =========================== */
html {
font-size: 100.01%;
height: 101%;
}
body {
margin: 0 auto;
height: 100%;
font: 62.5%/1.8em Arial, Verdana, sans-serif;
background-color: #fff;
color: #333;
}
/* LINKS ======================================= */
a {
text-decoration: underline;
}
a:visited {
text-decoration: underline;
}
a:active, a:focus, a:hover {
text-decoration: none;
outline: none;
}
a img {
border: none;
}
/* TYPOGRAPHY ================================== */
blockquote, address, pre {
margin: .5em 2em;
}
blockquote, p, li {
padding: 0 0 .4em 0;
}
h1, h2, h3, h4, h5, h6, p {
margin: 1em 0;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.6em;
}
h3 {
font-size: 1.4em;
}
p, li {
font-size: 1.2em;
}
/* FORMS ======================================= */
input, label {
vertical-align: middle;
}
label {
cursor: pointer;
}
input, select, textarea {
font-size: 1.2em;
font-family: inherit;
font-size: inherit;
}
input, textarea {
padding: .2em;
}
textarea {
overflow: auto;
}
/* TABLES ======================================= */
table {
table-layout: fixed;
word-wrap: break-word;
/* will not validate IE only */
overflow: hidden;
}
/* MENUS ========================================= */
/*MAIN MENU*/
#navwrap {/*BG color to left of #nav*/
height: 62px;
background: #f5fce0;
clear: both;
margin:10px 0 0;
}
ul#nav {
float: right;
height: 62px;
list-style: none;
margin: 0 10px 0 0;
background: #f5fce0;
clear: both;
}
#nav li {
float: left;
position: relative;
}
#nav li a {
float: left;
height: 62px;
line-height: 62px;
padding: 0 25px;
font-size: 15px;
font-weight: bold;
text-decoration: none;
color: #617e61;
}
#nav li a:active, #nav li a:focus, #nav li a:hover {
color: #656565;
}
#nav ul {
z-index: 99;
position: absolute;
left: 0;
top: 62px;
width: 180px;
margin-left: -999em;
padding: 5px 0 0 0;
list-style: none;
background:#EEF; /*IE needs some sort of BG for anchors*/
}
#nav li li a {
width: 180px;
padding:0;
height: auto;
line-height: normal;
}
#nav li li a:hover, #nav li li a:active {
color: #656565;
}
#nav li ul a:hover, #nav li ul a:active {
}
#nav li:hover ul ul, #nav li.sfHover ul ul {
margin-left: -999em;
}
#nav li:hover ul, #nav li.sfHover ul {
margin-left: 0;
}
/*FOOTER MENU*/
#footer ul {
}
#footer li {
}
#footer li a {
}
#footer li a:active, #footer li a:focus, #footer li a:hover {
}
/* LAYOUT ======================================= */
#wrap {
width: 1100px;
margin: 0 auto;
}
#header {
width: 1100px;
position: relative;
background:#cdf;
}
#header:after { /*contain floats w/out overflow*/
clear: both;
display: block;
content: "";
font-size:0;
}
#logo {
position: absolute;
width: 385px;
bottom: 0;
left: 0;
z-index: 100;
}
#logo a img {
display: block;
}
#header-right {
width: 438px;
float: right;
text-align: right;
margin:0 0 10px 0;
}
#newsletterbox {
width: 290px;
height: 63px;
float: left;
margin: 0 0 15px 0;
background: #f5fce0;
}
#newsletterbox p {
font-size: 12px;
font-weight: bold;
text-align: left;
color: #6d6e6b;
margin: 8px 0 0 8px;
padding: 0;
}
#newsletterbox .textbox-signup {
width: 170px;
margin: 0 0 0 5px;
}
#newsletterbox .button-signup {
background: #656565;
border: 0;
color: #fff;
margin: 0 0 0 4px;
}
#registrationform {
width: 146px;
height: 63px;
float: right;
margin: 0 0 15px 0;
}
#header-right p.discount {
text-align: right;
font-size: 15px;
font-weight: bold;
color: #656565;
line-height: 20px;
}
#header-right .large {
font-size: 22px;
color: #669266;
}
#header-right a.link {
color: #656565;
font-size: 12px;
text-decoration: none;
border-bottom: 2px solid #d8d8d8;
}
#footer {
}
/* GLOBAL CLASSES ================================ */
.center {
text-align: center;
}
.clear {
clear: both;
padding: 0;
margin: 0;
line-height: normal;
}
.floatleft {
float: left;
}
.floatright {
float: right;
}
.hidden {
display: none;
visibility: hidden;
}
.inline {
display: inline;
}
.small {
font-size: 10px;
font-weight: normal;
}
.large {
font-size: 20px;
font-weight: bold;
}
I forgot about an IE6/7 AP bug that happens when an AP element sits beside a float.
Using the html/css I posted above you would need move the #logo div to the end of the markup in the header for IE7.
<div id="navwrap">
<ul id="nav">
<li><a href="#">Classes</a></li>
<li><a href="#">Schedule</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Gym Gallery</a></li>
<li><a href="#">About Us</a>
<ul>
<li><a href="#">Philosophy</a></li>
<li><a href="#">Staff</a></li>
<li><a href="#">Our Gym</a></li>
<li><a href="#">FAQs</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div>
[B][COLOR=Blue]<div id="logo">[/COLOR][/B]
<a href="#"><img src="images/ccgc-logo.png" alt="#" /></a>
[B][COLOR=Blue]</div>[/COLOR][/B]
</div> <!-- end #header -->
Ray, thank you so much for your help! I didn’t use all of your code, but I used what I learned from it to make things work. I ended up taking the navwrap out of the header and that solved a lot of my problems. Thanks again!
Glad you found it helpful in some way
A lot of times you can just drag the menu into the header with a negative margin if you want it to look like it sits at the bottom of the header. Of course you usually need to know the height of it as well as placing some bottom padding in the header. Glad you got it worked out though.
I’m back. I am having trouble with the 2nd level of this menu.
URL: http://tinyurl.com/23ebkdu
Hover over About Us…I need to bump the whole 2nd level <ul> down so that the top of Philosophy is aligned with the top of the photos. Also, I need to decrease the spacing between the <li>'s but every time I do, it affects the 3rd level (About Us > Staff >).
What am I missing?
Hi Susan,
The problem is that your top level anchors (main list items) do not have a bottom padding or a height. You have set position:relative on them so the anchors are now the containing block for the AP’d sub UL.
Your sub UL is defaulting to top:auto; since you did not define a top offset value.
I normally set a defined height on my top level anchors and use that height as my top: offset value for the sub UL.
In your case you might get away with adding some bottom padding to your anchors and then just setting top:100% on your sub UL.
See if this works for you:
ul#nav li a {
text-decoration: none;
color: #617e61;
padding: [COLOR=Blue]30px 25px [B]14px[/B] 25px;[/COLOR]
position: relative;
display: block;
}
ul#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
[COLOR=Blue]top:100%;[/COLOR]
height: auto;
width: 180px;
margin: 0;
padding: 0;
}
This simple example will show you how the top/bottom paddings are setting the
height of the anchor while using top:100% for the sub UL.
Hope that helps
Thank you so much, Ray. And thanks for explaining it, too. That helps me learn.