정렬되지 않은 목록 위치를 설정하는 방법은 무엇입니까?

메인 네비게이션 아이템 아래에 정렬되지 않은 자식리스트가있는 네비게이션 바가 있습니다. 내 문제는 내부 목록에 있습니다. 절대 위치를 지정하면 내부 목록이 페이지의 가운데에 배치되고, 상대 위치를 지정하면 상위 목록과 나란히 배치됩니다.정렬되지 않은 목록 위치를 설정하는 방법은 무엇입니까?

첫 번째 하위 항목을 상위 항목 바로 아래에 정렬하려고합니다.

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

@Joel, 걱정하지 마시고 언제나 도와 드리겠습니다 =) –

, 지금 막 당신의 CSS

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

출처

2010-03-14 00:21:37 Vlad

정렬되지 않은 목록 위치를 설정하는 방법은 무엇입니까?

답변

관련 문제