Как установить дочерний неупорядоченный список позиций?

Question

У меня есть панель навигации с неупорядоченными списками детей, вложенными в основные элементы панели навигации. Моя проблема заключается во внутреннем списке, когда я позиционирую абсолют, внутренний список центрируется на странице, а когда я позиционирую относительный, он позиционируется как встроенный в список родителей.

Я пытаюсь получить первый дочерний элемент, который выстроится в линию непосредственно под его родителем.

/*  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;
}

И мой HTML:

<div id="navbar2">

<ul id="navbar">
  <li id="index"><a href="index.php">About Rattletree</a></li>
  <li id="upcomingshows"><a href="upcomingshows.php">Calendar</a></li>
  <li id="booking"><a href="booking.php">Contact</a>
            <ul class="innerlist">
                <li class="innerlist"><a href="#">Booking</a></li>
                <li class="innerlist"><a href="#">press</a></li>
            </ul>
  </li>
  <li id="instruments"><a href="instruments.php">The Band</a>
            <ul class="innerlist">
                <li class="innerlist"><a href="#">The Instruments</a></li>
                <li class="innerlist"><a href="#">The Players</a></li>
            </ul>
  </li>
  <li id="classes"><a href="classes.php">Sights &amp; Sounds</a>
            <ul class="innerlist">
                <li class="innerlist"><a href="#">Listen</a></li>
                <li class="innerlist"><a href="#">photos</a></li>
                <li class="innerlist"><a href="#">video</a></li>
            </ul>
  </li>
  <li id"classes"><a href="classes.php">Workshops &amp; Classes</a></li>


</ul>
</div>

Спасибо за любую помощь!

Answer 1

Если вы установите #navbar > li {position: relative;} и ul.innerlist {position: absolute; }, тогда он и его потомки li будут располагаться относительно #navbar > li s вместо страницы.

Answer 2

Если я правильно понял, что вы хотите, просто добавьте это в свой CSS

#navbar .innerlist {
    display: block;
    margin-left: 0px;
    padding-left: 0px;
}