動態設置li的寬度以匹配父項的寬度ul

我正在使用嵌套在ul中的li進行下拉，但無法設置li的寬度以動態匹配ul的寬度。動態設置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>

來源

2012-04-11 aman.kejriwal

可能有助於創建一個[jsFiddle]（http://jsfiddle.net），所以我們可以很容易地玩它 – 2012-04-11 09:24:23

很多代碼威懾，所以儘量減少你展示的代碼量是什麼必須理解問題並展示你自己嘗試了什麼，以及你究竟卡在哪裏。例如。我們不需要看到註釋掉的代碼。 – Armatus 2012-04-11 09:25:14

我不確定我是否能夠理解您的問題，但不是「寬度：100％;」您在尋找什麼？ – Cthulhu 2012-04-11 09:27:24