CSS 중첩 목록 너비와 높이

Question

CSS에서 중첩 목록을 사용하여 스타일이 지정된 바닥 글 메뉴를 얻으려고합니다. 요즘 대부분의 CMS가 함께 사용하는 표준 방법 인 것 같습니다. 그러나 난 너비와 높이를 동적으로 올바른 크기로 확장하는 데 어려움을 겪고있다. 따라서 각 최상위 목록 항목은 수평으로 배치되는 반면, 각 하위 수준 목록 항목은 그 아래에 나열됩니다.

문제 1 : 최상위 수준 목록 항목의 총 너비가 가장 긴 자식 목록 항목 또는 최상위 목록 항목 중 너비가 길어지기를 원합니다. 나는 라인을 꺾고 싶지 않아.

문제 2 : 스크롤바 (모두 overflow: auto 또한 :after CSS 선택기와 clear: both 접근법을 사용하여 시도)을 둘러싸는 div 높이는 확장되지 대신에 표시된다.

나는 메뉴를 동적으로 만들고 싶기 때문에 고소를 피하려고합니다.

위의 문제를 해결하려면 어떻게해야합니까? 이것은 내가 지금까지 무엇을 가지고 : (live example)

<div id="footer"> 
    <div id="footerstrip" > 
     <div id="footercontent" > 
      <div id="footerleft"> 
       <img src="images/LogoGrey.png" />&nbsp;<a href="#"><img src="images/FooterHome.png" /></a> 
      </div> 

      <div id="footer-menu-div"> 
       <ul id="footer-menu"> 
        <li>Fashion 
         <ul> 
         <li>Apparel</li> 
         <li>Celebrity Styles</li> 
         <li>Fashion Spotlight</li> 
         <li>Trends</li> 
         </ul> 
        </li> 

        <li>Beauty 
         <ul> 
         <li>Hair</li> 
         <li>Skincare</li> 
         <li>Make-up &amp; Cosmetics</li> 
         <li>Nails</li> 
         </ul> 
        </li> 

        </li> 
        <li>Lifestyle</li> 
        <li>Love</li> 
        <li>Culture</li> 
        <li>Subscribe</li> 
        <li>Events</li> 
       </ul> 
      </div> 
     </div> 
    </div> 

CSS의 :

#footer 
{ 
    margin-top: 30px; 
    clear: both; 
    width: 100%; 
} 

#footerstrip 
{ 
    background-color: #F0F0F0; 
    width: 100%; 
    margin-top: 20px; 
    overflow: auto; 
} 

#footercontent 
{ 
    padding: 10px 0px 10px 0px; 
    width: 1100px; 
    text-align: left; 
    color: #666666; 
    font-size: 10px; 
    font-family:Arial, Helvetica, sans-serif; 
    text-transform:uppercase; 
    vertical-align:middle; 
    margin: auto; 
    overflow: auto; 
    background-color: #e0e0df; 
} 

#footercontent a 
{ 
    color: #666666; 
    font-size: 10px; 
    font-family:Arial, Helvetica, sans-serif; 
    text-transform:uppercase; 
    text-decoration:none; 
    overflow: auto; 
} 

#footercontent img 
{ 
    vertical-align: middle; 
    margin-left: 5px; 
} 

#footerleft 
{ 
    text-align:right; 
    width: 120px; 
    padding: 0px; 
    margin: 0px; 
    float: left;  
} 

#footer-menu-div 
{ 
    float: left; 
    padding: 0px 5px 0px 5px; 
    margin: auto; 
    text-align: left; 
    position: relative; 
    display: block; 
} 

#footer-menu-div:after { 
    content:""; 
    clear:both; 
    display:block; 
} 

ul#footer-menu 
{ 
    margin: 0px; 
    padding: 0px; 
} 

ul#footer-menu li 
{ 
    background-color: #c7c6c6; 
    color: #212121; 
    font-weight: bold; 
    font-size: 11px; 
    list-style: none; 
    display: inline; 
    margin: 0px; 
    padding: 5px 10px 5px 10px; 
    font-family:Arial, Helvetica, sans-serif; 
    float: left; 
    text-transform: capitalize; 
    position: relative; 
} 

ul#footer-menu li:first-child 
{ 
    border-top-left-radius: 5px 5px; 
    border-bottom-left-radius: 5px 5px;  
} 

ul#footer-menu li:last-child 
{ 
    border-top-right-radius: 5px 5px; 
    border-bottom-right-radius: 5px 5px;   
} 

ul#footer-menu li ul 
{ 
    display: block; 
    position: absolute; 
    margin: 0; 
    padding: 0;  
} 

ul#footer-menu li ul li 
{ 
    background-color: transparent; 
    font-weight: normal; 
    display: inline;  
} 

UPDATE

나는 단지 둥근 모서리와 그 스트립은 최고 수준의 주위가되고 싶어요 모든 항목 주위에있는 항목이 아닌 목록 항목. 그래서 그것은 수평으로 한 줄 쯤 될 것입니다.

실제 사실 UPDATE 2

, 각 목록 항목의 내용은 <a> 링크가 될 것입니다. 피드백을 기반으로 지금까지 this을 만들었지 만, 을 width: 100%으로해야만 백그라운드가 다음 최상위 항목으로 계속 진행되고 이로 인해 수평 공간이 벗어납니다. :(

최상위 수준 항목 링크가 넓은 아이의 긴으로 될 문제가 해결 될 것입니다 링크 할 수있는 방법이 있다면.

Answer 1

나는 두 문제가 ul#footer-menu li ul { position: absolute; } 치우는 해결해야한다고 생각 ..이 즉시 스크롤 문제를 해결하지만 우리는 여전히 그래서 한 줄에 하나씩 표시 목록의 항목이 필요합니다,이 추가 :.. ul#footer-menu li ul li { display: block; float: none; }​

을 이제 유일하게 남은 문제는 배경이 일치되고있는 나는 당신이 넣어해야합니다 생각 <ul>의 배경은 다음과 같습니다 : ul#footer-menu { overflow: hidden; background-color: #C7C6C6; border-radius: 5px; }. 그러면 background-color 및 <li> 요소의 border-radius.

여기 JSFiddle에서 완성 된 제품입니다 : 시행 착오를 많이 후 http://jsfiddle.net/TLRSC/6/

Answer 2

OK, 나는 내가 원하는 방식을 볼 수있었습니다. 둥근 배경은 목록 요소 자체가 아닌 최상위 수준 목록 요소의 앵커와 연결됩니다.나는 일하러 가야 float : left 및 clear: left의 설정을 모두 주변 div, 모두 ul 태그의 li 태그와 a 태그 (정확히 속임수를 썼는지 조합 솔직히 아무 생각) 놀러 없습니다했다.

어쨌든 여기가 작동 :

http://jsfiddle.net/TLRSC/11/