Javascript js风格没有'；t更新

我有一段代码让我非常疯狂：我的网站上有一个水平菜单，在鼠标悬停事件中，其中一个项目上会出现一个垂直子菜单。我让它工作。html看起来是这样的（暂时不要介意js，注释也不是真正的html）：

如您所见，如果显示菜单，则保存原始宽度，并应用新宽度。警报功能会警报正确的新宽度。但是，由于某些原因，新的宽度没有显示在页面上

我只是不知道我做错了什么。有人能帮我吗

---

编辑：我没有想到纯css解决方案。然而，我仍然想知道为什么页面没有更新。有人知道这个问题的答案吗？

这似乎需要大量的工程来完成一些相当简单的事情。首先，您是否考虑过下拉结果的固定宽度

接下来，您已经查看了许多纯CSS示例，因此根本不需要使用JavaScript

---

我认为你的做法不对。对于您的情况，根本不需要js，它可以在cssthanks中完成。谢谢您的回答，我没有想到纯css解决方案。然而，我仍然不明白为什么页面没有更新。你也知道为什么会这样吗？

<ul class="menu" onmouseout="menu('item',false)">  //the real html has some code to prevent nested elements to call the onmouseout event
    <li id="itemLI">
        <ul onmouseover="menu('item',true)">
            <li><img src=somesource width=somewidth /></li>
            <li class="drowdown item">submenuitem which is wider than the main menu item</li> //hidden until mouseover of the main item
        </ul>
    </li>
    //somemoreitems
</ul>

var orwidth = 0;
function menu(menuItem,show)
{
    //change menu width
    var item = menuItem + "LI";
    if (show)
    {
        //The important part which doesn't work
        var element = document.getElementById(item);
        var style = getComputedStyle(element,null);
        orwidth = style.width;
        element.style.width = "auto";
        style = getComputedStyle(element,null);
        alert(style.width);
    }
    else
    {
        document.getElementById(item).style.width = orwidth;
    }
    //show submenu
    if (show)
    {
        var visible ="visible";
    }
    else
    {
        var visible = "hidden";
    }
    var lis = document.getElementsByTagName("li");
    for (temp in lis)
    {
        if (lis[temp].className.indexOf("dropdown") != -1 && lis[temp].className.indexOf(menuItem) != -1)
        {
            lis[temp].style.visibility = visible;
        }
    }

}