动态设置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