如何設置子無序列表的位置？

我有一個導航欄與兒童無序列表嵌套在主導航欄項下。我的問題是在內部列表中，當我絕對定位，內部列表居中到頁面，並且當我定位相對時，它與父列表內聯定位。如何設置子無序列表的位置？

我想讓第一個子項直接排列在它的父項下。

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

感謝您的幫助！

來源

2010-03-14 Joel

如果您設置了#navbar > li {position: relative;}和ul.innerlist {position: absolute; }那麼它和它的後代li元素將相對於#navbar > li而不是頁面定位。

來源

2010-03-14 00:15:11

這做到了，我曾誤發而不是相對立的UL認證。謝謝！ – Joel 2010-03-14 00:42:52

@Joel，不用擔心，總是很樂意幫忙=） – 2010-03-14 01:13:54

如果我理解正確的，你想要什麼，只是將它添加到您的CSS

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

來源

2010-03-14 00:21:37 Vlad

如何設置子無序列表的位置？

回答

相關問題