Javascript 动态设置li的宽度以匹配父ul的宽度

我正在使用ul中嵌套的li进行下拉，但无法将li的宽度设置为动态匹配ul的宽度

请注意，li元素限制在下拉列表中

下面的内容看起来太多了，但本质上是关于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>

/*------ADX菜单：基本样式----*/
/*删除所有列表样式
.menu，.menu ul{
保证金：0；
填充：0；
边界：0；
列表样式类型：无；
显示：块；
}
*/
李先生{
保证金：0；
填充：0；
边界：0；
显示：块；
浮动：左；/*通过浮动将所有主列表项移动到一行中*/
位置：相对；/*定位每个LI，从而产生潜在的IE.win重叠问题*/
z-index:5；/*因此我们需要在这里应用显式z-index*/
}
.菜单李：悬停{
z-index:10000；/*…在这里。这确保活动项始终高于菜单中的任何其他项*/
空白：正常；/*需要解决IE7:悬停错误（如果不存在，则忽略上面的z索引）
看见http://www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp 其他有用的东西*/
}
.李莉{
float:none；/*嵌套菜单的项保留在单独的行中*/
}
.菜单ul{
可见性：隐藏；/*最初隐藏所有子菜单*/
位置：绝对位置；
z指数：10；
左：0；/*隐藏时，始终将其保留在左下角*/
底部：0；/*以尽可能避免滚动条*/
}
.菜单li：悬停>ul{
可见性：可见；/*悬停时显示子菜单*/
底部：100%；/*第一级超出其父项*/
}
.menu li li:hover>ul{/*2nd+级别位于父项的右侧*/
底部：0；
左：100%；
}
/*--浮动，清除--
UL内部浮动LIs的强制遏制*/
.menu:after，.menu ul:after{
内容：“.”；
身高：0；
显示：块；
可见性：隐藏；
溢出：隐藏；
明确：两者皆有；
}
.menu、.menu ul{/*IE7浮点清除：*/
最小高度：0；
}
.菜单{
填充：30px 30px 30px 10px；
利润率：0-30px-10px；
}
/*------ADX菜单：设计风格----*/
.menu，.menu ul li{
颜色：#eee；
背景：#000；
}
.菜单ul{
背景：#000；
宽度：11em；
}
.菜单a{
文字装饰：无；
填充：.4em 1em；
显示：块；
位置：相对位置；
字体系列：BlairMdITCTTMedium；
颜色：#848484；
字体大小：11px；
}
.菜单a:悬停，.菜单li:悬停>a{
颜色：#ccc；
}
.menu li li{/*围绕每个项目创建边框*/
边框：1px实心#000；
}
.menu ul>li+li{/*并删除列表中除第一项外所有项目的上边框*/
边界顶部：0；
}
.menu li li:悬停>ul{/*插入第二个+子菜单，以显示重叠*/
底部：5px；
左：90%；
}
/*修复IE5/Mac\*//*/
.菜单a{
浮动：左；
}
/*端部固定*/
/*]]>*/
**HTML代码**

宽度：80px；“>






宽度：80px；“>






宽度：80px；“>






宽度：80px；“>








宽度：130px；“>

您可以在css中为li指定一个百分比宽度。。。一共有7个，对吗？所以，也许把每一个都调宽10%，在开始和结束时把4%放在每一个和3%之间？或者，您可以使用JavaScript检测页面大小调整事件，然后获取页面/ul宽度，并使用一些好的ol“老式数字压缩”设置每个li项的宽度

默认情况下，li的宽度似乎与ul相同

至少基于我在这里的实验

如果您删除ul宽度，它将是100%，通过设置ul宽度，li将跟随。

---

因此，在您的代码中必须有其他内容来删除这些内容。

可能有助于创建一个新的解决方案，这样我们就可以轻松地使用itLots of code Detere，因此请尽量减少您显示的代码量，以了解问题并演示您自己尝试过的内容，以及您到底遇到了什么困难。例如，我们不需要看到注释掉的代码。我不确定是否能够理解您的问题，但宽度：100%你在找什么？你没有提到父/子的宽度。。。默认情况下，其宽度设置为自动。。。如果要将“子宽度”设置为“父宽度”可调。。。然后给父项指定一个固定的宽度并设置。菜单li{width:100%}