title: Dynamically set width of li to match width of parent ul
body: <p>I am making a drop-up using li nested in ul but am not able to set the width of li to dynamically match the width of the ul.</p>
  
  <p>Please note that the li elements are constricted within a drop-up list.</p>
  
  <p>The below looks like too much css but in essence it's just about the ul and li.</p>
  
  <p><strong>THE CSS</strong></p>
  
  <pre><code>&lt;style type="text/css" media="screen, tv, projection"&gt;
  
  /* - - - 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&gt;ul {
      visibility: visible;    /* display submenu them on hover */
      bottom: 100%;   /* 1st level go above their parent item */
  }
  
  .menu li li:hover&gt;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&gt;a {
      color: #ccc;
  }
  
  .menu li li {   /* create borders around each item */
      border: 1px solid #000;
  }
  
  .menu ul&gt;li + li {  /* and remove the top border on all but first item in the list */
      border-top: 0;
  }
  
  .menu li li:hover&gt;ul {  /* inset 2nd+ submenus, to show off overlapping */
      bottom: 5px;
      left: 90%;
  }
  
  
  /* Fix for IE5/Mac \*//*/
  .menu a {
      float: left;
  }
  /* End Fix */
  
  /*]]&gt;*/
  &lt;/style&gt;
  
  
  **THE HTML CODE**
  
      &lt;ul class="menu"&gt;
          &lt;li style="width:80px;"&gt;
          &lt;a id="menu1" title="View all posts filed under Accessories" href="http://monique-relander.be/objects/accessories/"&gt;Accessories&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="http://www.aplus.co.yu/"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="http://www.aplus.co.yu/feeds/"&gt;Feeds&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="http://www.aplus.co.yu/archive/"&gt;Archive&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li style="width:80px;"&gt;
          &lt;a title="View all posts filed under Furniture" href="http://monique-relander.be/objects/furniture/"&gt;Furniture&lt;/a&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href="http://www.aplus.co.yu/"&gt;Home&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="http://www.aplus.co.yu/feeds/"&gt;Feeds&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="http://www.aplus.co.yu/archive/"&gt;Archive&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li style="width:80px;"&gt;
          &lt;a title="View all posts filed under Lighting" href="http://monique-relander.be/objects/lighting/"&gt;Lighting&lt;/a&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href="http://www.aplus.co.yu/"&gt;Home&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="http://www.aplus.co.yu/feeds/"&gt;Feeds&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="http://www.aplus.co.yu/archive/"&gt;Archive&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li style="width:80px;"&gt;
          &lt;a title="View all posts filed under Mirrors" href="http://monique-relander.be/objects/mirrors/"&gt;Mirrors&lt;/a&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href="http://www.aplus.co.yu/"&gt;Home&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="http://www.aplus.co.yu/feeds/"&gt;Feeds&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="http://www.aplus.co.yu/archive/"&gt;Archive&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class="none" style="width:140px;"&gt;
          &lt;a title="View all posts filed under NEW ARRIVALS" href="http://monique-relander.be/objects/new-arrivals/"&gt;New Arrivals&lt;/a&gt;&lt;/li&gt;
          &lt;li style="width:130px;"&gt;
          &lt;a title="View all posts filed under Sold Gallery" href="http://monique-relander.be/objects/sold-gallery/"&gt;Sold Gallery&lt;/a&gt;&lt;/li&gt;
          &lt;li class="cat-item right"&gt;
          &lt;a href="/contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>