javascript - 悬停时打开菜单

Question

我想在将鼠标悬停在菜单上时打开菜单，我尝试从 css 对其进行编辑，但我也没有在 HTML 中尝试过，也没有发生任何事情，所以我认为它与 JavaScript 代码有关。我对 JS 不太熟悉，所以我需要你的帮助。

这是我的 HTML:

<div class="allwrap">

    <nav class="nav-menux">
        <div class="menu-menu-container">
          <ul id="left-navigation" class="menu">
            <li id="menu-item-6" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-6"><a href="#">Home</a></li>
            <li id="menu-item-1439" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1439"><a href="#">our leatest</a></li>
            <li id="menu-item-62" class="menu-item menu-item-type-post_type_archive menu-item-object-portfolio current-menu-item menu-item-62"><a href="#">our work</a></li>
            <li id="menu-item-1416" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1416"><a href="#">decor</a></li>
            <li id="menu-item-1409" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1409"><a href="#">wood work</a></li>
            <li id="menu-item-80" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-80"><a href="#">contact us</a></li>
          </ul>
       </div>   

这是我使用的 JS 代码:

            var menuids=["left-navigation"]

            function buildsubmenus(){
            for (var x=0; x<menuids.length; x++){
              var ultags=document.getElementById(menuids[x]).getElementsByTagName("ul")
                for (var t=0; t<ultags.length; t++){
                ultags[t].parentNode.getElementsByTagName("a")[0].className="left-navigation-sub"
                    if (ultags[t].parentNode.parentNode.id==menuids[x]) //if this is a first level submenu
                        ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
                    else //else if this is a sub level submenu (ul)
                      ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
                ultags[t].parentNode.onmouseover=function(){
                this.getElementsByTagName("ul")[0].style.display="block"
                }
                ultags[t].parentNode.onmouseout=function(){
                this.getElementsByTagName("ul")[0].style.display="none"
                }
                }
                    for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
                    ultags[t].style.visibility="visible"
                    ultags[t].style.display="none"
                    }
              }
            }

            if (window.addEventListener)
            window.addEventListener("load", buildsubmenus, false)
            else if (window.attachEvent)
            window.attachEvent("onload", buildsubmenus)

        </script>

Answer 1

您可以使用纯 CSS 来做到这一点。

这是 HTML:

<ul id="left-navigation" class="menu">
            <li id="menu-item-6" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-6"><a href="#">Home</a></li>
            <li id="menu-item-1439" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1439"><a href="#">our leatest</a></li>
            <li id="menu-item-62" class="menu-item menu-item-type-post_type_archive menu-item-object-portfolio current-menu-item menu-item-62"><a href="#">our work</a></li>
            <li id="menu-item-1416" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1416"><a href="#">decor</a></li>
            <li id="menu-item-1409" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1409"><a href="#">wood work</a></li>
            <li id="menu-item-80" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-80"><a href="#">contact us</a></li>
 </ul>

这是 CSS:

#left-navigation{
  width:20px; /* give it a width to hover*/
  background-color:green;
  overflow:hidden; /* overflow as hidden so content don't mess with the height of menu*/
}

#left-navigation li{
  width:100px;       /* give it a default width for li*/
  visibility: hidden;/* hide content */
}

#left-navigation:hover{
  width:100px; /* on hover change width*/
}

#left-navigation:hover li{
  visibility:visible; /*on hover, show li*/
}

这是一个正在运行的 jsfiddle