Dynamically set width of li to match width of parent ul

Question

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.

Please note that the li elements are constricted within a drop-up list.

The below looks like too much css but in essence it's just about the ul and li.

THE 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

The width of the li seems to be the same as the ul by default.

Atleast based on my experiments here http://jsfiddle.net/dwCsW/

If you remove the ul width it will be 100%, and by setting ul width the li will follow. So there must be something else in your code removing that.

Answer 2

You could either give the li's a percentage width in the css... there are 7 of them, right? so maybe make each 10% wide, put 4% between each one and 3% at the beginning and end? Or, you could use JavaScript and detect the page resize event, then get the page/ul width and set the width of each li item using some good ol' fashioned number crunchin'!