동적으로 li의 너비를 부모 ul의 너비와 일치하도록 설정합니다.

Question

저는 li을 중첩하여 드롭 다운을 만들고 있지만 li의 너비를 ul의 너비와 동적으로 일치시킬 수는 없습니다.

li 요소는 드롭 다운 목록 내에 있습니다.

다음은 너무 많은 CSS처럼 보이지만 본질적으로 ul 및 li에 관한 것입니다.

CSS를

<style type="text/css" media="screen, tv, projection"> 

/* - - - ADxMenu: BASIC styles - - - */ 

/* remove all list stylings 
.menu, .menu ul { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    list-style-type: none; 
    display: block; 
} 
*/ 
.menu li { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    display: block; 
    float: left; /* move all main list items into one row, by floating them */ 
    position: relative; /* position each LI, thus creating potential IE.win overlap problem */ 
    z-index: 5;  /* thus we need to apply explicit z-index here... */ 
} 

.menu li:hover { 
    z-index: 10000; /* ...and here. this makes sure active item is always above anything else in the menu */ 
    white-space: normal;/* required to resolve IE7 :hover bug (z-index above is ignored if this is not present) 
          see http://www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp for other stuff that work */ 
} 

.menu li li { 
    float: none;/* items of the nested menus are kept on separate lines */ 
} 

.menu ul { 
    visibility: hidden; /* initially hide all submenus. */ 
    position: absolute; 
    z-index: 10; 
    left: 0; /* while hidden, always keep them at the bottom left corner, */ 
    bottom: 0;  /*  to avoid scrollbars as much as possible */ 

} 

.menu li:hover>ul { 
    visibility: visible; /* display submenu them on hover */ 
    bottom: 100%; /* 1st level go above their parent item */ 
} 

.menu li li:hover>ul { /* 2nd+ levels go on the right side of the parent item */ 
    bottom: 0; 
    left: 100%; 
} 

/* -- float.clear -- 
    force containment of floated LIs inside of UL */ 
.menu:after, .menu ul:after { 
    content: "."; 
    height: 0; 
    display: block; 
    visibility: hidden; 
    overflow: hidden; 
    clear: both; 
} 
.menu, .menu ul { /* IE7 float clear: */ 
    min-height: 0; 
} 

.menu ul ul { 
    padding: 30px 30px 30px 10px; 
    margin: 0 0 -30px -10px; 

} 


/* - - - ADxMenu: DESIGN styles - - - */ 

.menu, .menu ul li { 
    color: #eee; 
    background: #000; 
} 

.menu ul { 
    background: #000; 
    width: 11em; 
} 

.menu a { 
    text-decoration: none; 
    padding: .4em 1em; 
    display: block; 
    position: relative; 
     font-family:BlairMdITCTTMedium; 
     color:#848484; 
     font-size:11px; 
} 

.menu a:hover, .menu li:hover>a { 
    color: #ccc; 
} 

.menu li li { /* create borders around each item */ 
    border: 1px solid #000; 
} 

.menu ul>li + li { /* and remove the top border on all but first item in the list */ 
    border-top: 0; 
} 

.menu li li:hover>ul { /* inset 2nd+ submenus, to show off overlapping */ 
    bottom: 5px; 
    left: 90%; 
} 


/* Fix for IE5/Mac \*//*/ 
.menu a { 
    float: left; 
} 
/* End Fix */ 

/*]]>*/ 
</style> 


**THE HTML CODE** 

    <ul class="menu"> 
     <li style="width:80px;"> 
     <a id="menu1" title="View all posts filed under Accessories" href="http://monique-relander.be/objects/accessories/">Accessories</a> 
      <ul> 
       <li><a href="http://www.aplus.co.yu/">Home</a></li> 
       <li><a href="http://www.aplus.co.yu/feeds/">Feeds</a></li> 
       <li><a href="http://www.aplus.co.yu/archive/">Archive</a></li> 
      </ul> 
     </li> 
     <li style="width:80px;"> 
     <a title="View all posts filed under Furniture" href="http://monique-relander.be/objects/furniture/">Furniture</a> 
        <ul> 
         <li><a href="http://www.aplus.co.yu/">Home</a></li> 
         <li><a href="http://www.aplus.co.yu/feeds/">Feeds</a></li> 
         <li><a href="http://www.aplus.co.yu/archive/">Archive</a></li> 
      </ul> 
     </li> 
     <li style="width:80px;"> 
     <a title="View all posts filed under Lighting" href="http://monique-relander.be/objects/lighting/">Lighting</a> 
        <ul> 
         <li><a href="http://www.aplus.co.yu/">Home</a></li> 
         <li><a href="http://www.aplus.co.yu/feeds/">Feeds</a></li> 
         <li><a href="http://www.aplus.co.yu/archive/">Archive</a></li> 
      </ul> 
     </li> 
     <li style="width:80px;"> 
     <a title="View all posts filed under Mirrors" href="http://monique-relander.be/objects/mirrors/">Mirrors</a> 
        <ul> 
         <li><a href="http://www.aplus.co.yu/">Home</a></li> 
         <li><a href="http://www.aplus.co.yu/feeds/">Feeds</a></li> 
         <li><a href="http://www.aplus.co.yu/archive/">Archive</a></li> 
      </ul> 
     </li> 
     <li class="none" style="width:140px;"> 
     <a title="View all posts filed under NEW ARRIVALS" href="http://monique-relander.be/objects/new-arrivals/">New Arrivals</a></li> 
     <li style="width:130px;"> 
     <a title="View all posts filed under Sold Gallery" href="http://monique-relander.be/objects/sold-gallery/">Sold Gallery</a></li> 
     <li class="cat-item right"> 
     <a href="/contact">Contact</a></li> 
    </ul> 

Answer 1

li의 너비는 기본적으로 ul과 같습니다. 당신은 UL이 100 %가됩니다 폭, 및 UL을 설정하면 리튬이 따를 폭에 의해 제거하면

은이어야 여기 http://jsfiddle.net/dwCsW/

내 실험을 기반으로. 코드에 코드를 제거하는 다른 것이 있어야합니다.

Answer 2

당신은 리튬을 줄 수 중 하나는 ... 바로, 그 중 7 CSS의 비율 폭이 있습니다이야? 그래서 각 10 % 너비를 만들고, 처음부터 끝까지 각각 1 %에서 3 % 사이에 4 %를 넣으시겠습니까? 또는 JavaScript를 사용하여 페이지 크기 조정 이벤트를 감지 한 다음 페이지/ul 너비를 가져 와서 각 li 항목의 너비를 설정할 수 있습니다.