How to set child unordered list position? - css

Question

I have a nav bar with children unordered lists nested under the main navbar items. My problem is on the inner list, when I position absolute, the inner list is centered to the page, and when I position relative, it is positioning inline with the parent list.
I'm trying to get the first child item to line up directly under it's parent.
/* OUTER LIST STYLING */
div#navbar2 {
position:relative;
width: 100%;
border-top: solid #000 1px;
border-bottom: solid #546F8B 1px;
background-color: #546F8B;
}
div#navbar2 ul#navbar {
padding: 0;
margin: 10px 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
letter-spacing:1px;
color: #FFF;
white-space: nowrap;
}
div#navbar2 ul#navbar li {
margin: 0 2px;
list-style-type: none;
display: inline;
}
div#navbar2 li a {
text-decoration: none;
color: #fff;
padding: 10px 10px;
}
div#navbar2 li a:link {
color: #FFF:
}
div#navbar2 li a:visited {
color: #ffffff;
}
div#navbar2 li a:hover {
color: #000;
background-color: #FDFFC9;
}
/* INNER LIST STYLING */
div#navbar2 ul#navbar li ul.innerlist{
display: none;
color:#000;
}
div#navbar2 ul#navbar li ul.innerlist li{
color:#000;
}
div#navbar2 ul#navbar li:hover ul.innerlist {
position: absolute;
display: inline;
left: 0;
width: 100%;
margin: 40px 0 0px 0px;
padding: 0px;
color:#000;
}
div#navbar2 li.innerlist a {
text-decoration: none;
color: #000;
padding: 10px 10px;
}
div#navbar2 li.innerlist a:link {
color: #000:
}
div#navbar2 li.innerlist a:visited {
color: #000;
}
div#navbar2 li.innerlist a:hover {
color: #000;
background-color: #FDFFC9;
}
And my html:
<div id="navbar2">
<ul id="navbar">
<li id="index">About Rattletree</li>
<li id="upcomingshows">Calendar</li>
<li id="booking">Contact
<ul class="innerlist">
<li class="innerlist">Booking</li>
<li class="innerlist">press</li>
</ul>
</li>
<li id="instruments">The Band
<ul class="innerlist">
<li class="innerlist">The Instruments</li>
<li class="innerlist">The Players</li>
</ul>
</li>
<li id="classes">Sights & Sounds
<ul class="innerlist">
<li class="innerlist">Listen</li>
<li class="innerlist">photos</li>
<li class="innerlist">video</li>
</ul>
</li>
<li id"classes">Workshops & Classes</li>
</ul>
</div>
Thanks for any help!

Answer 1

If you set the #navbar > li {position: relative;} and the ul.innerlist {position: absolute; } then it, and its descendant li elements, will be positioned in relation to the #navbar > lis instead of the page.

Answer 2

If I understood correctly what do you want, just add this to your CSS
#navbar .innerlist {
display: block;
margin-left: 0px;
padding-left: 0px;
}