CSS Drop Down Menu Issues

[Tjdunklee]

I'm making a SubNav drop down menu on my main Navigation Menu and I'm having some trouble since I'm completely new to making on of these.  I'm having drop with the drop menu not aligning underneath the main list item.  I have uploaded my example to a test site for you to see.  When you roll over "About Us" I want the subnav to be directly underneath like normal...  Could somebody help a NOOB with some code additions to make this work. Thanks in advance!

 

http://hotelfoliorequest.com/DigitalTownTesting/

[Hybride]

Can you post your CSS code? Although am guessing it has something to do with the positioning you may be using.

[Tjdunklee]

No problem! Thanks in advance for your help.  Here is my complete css (well excluding my reset and typography).

 

html, body
{
height: 100%;
}

/* Main Layout */

.centerWrapper
{
margin: 0px auto;
width:900px;
}
#container
{
min-height: 100%;
position: relative;
}
#outerHeader
{
background-color: #EFF7FF;
background: url(../images/headerOuterBG.gif) top left repeat-x;
}
#header
{
background: url(../images/headerBG.gif) top left no-repeat;
width: 100%;
height: 139px;
}
#navBar
{
background: url(../images/navBarBG.gif) repeat-x;
height: 43px;
}
#content
{
padding-bottom: 140px; /*clears the footer*/
text-align: center;
}
#footer
{
height: 127px;
position: absolute;
bottom: 0px;
width: 100%;
background: url(../images/footerOuterBG.gif) repeat-x;
}
#footerInner
{
background: url(../images/footerInnerBG.png) center no-repeat;
height: 127px;
}

/* navBar Styles */

#navBar ul, #navBar li 
{
display: inline;
}
#navBar li 
{
display: inline;
position: relative;
}
#navBar, #navBar a 
{
background: #958573 url(../images/navLinksBG.gif) repeat-x;
}
#navBar a {
border-right: 1px solid #AFA69C;
color: #654;
float: left;
font: bold 1em Georgia,Tahoma,sans-serif;
margin-right: 1px;
padding: 12px 12px;
text-align: center;
text-decoration: none;
}
#navBar li:first-child a 
{
border-left: 1px solid #AFA69C;
}
#navBar a:hover,#navBar li.current a 
{
background-position: 0 -43px;
color: #543;
}

/* testing */

#navBar li ul{
background:#ccc;
display:none;
height:auto;
position:absolute;
top: 43px;
width:auto;
z-index:200;
/*top:1em;
/*left:0;*/
}
#navBar li:hover ul{
display:block;
}
#navBar li ul li a{
background: #ccc;
clear: both;
border: none;
}



/* Footer Styles */

#footerLinks
{
padding-top: 20px;
text-align: center;
}

#copyright
{
margin-top: 70px;
text-align: center;
color: #2b3031;
}

/* Social Media Link */

#socialMedia
{
float: right;
padding-top: 3px;
border: 0px solid black;
}

[Tjdunklee]

Anybody?  Still looking for a solution.

[Hybride]

Not sure if this is going to work on all of your menu boxes, but for the one you posted here, this is the code I got to work:

#navBar ul li ul{
display:block;
margin-left:80px;
}

You can also add an absolute position if you want.

[Tjdunklee]

Thank you for the help, I'll give that a try.