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

希望这有帮助。

＆＃13;

ul{
  padding:0;
  list-style:none
}
ul.menu{
  width:200px
}
ul.menu li{
  position:relative;
  border:1px #ddd solid;
}
ul.menu li a{
  display:block;
  white-space:nowrap
}
ul.menu li ul{
  position:absolute;
  top:0;
  left:100%;
   display:none
}
ul.menu li:hover>ul{
  display:block
}

＆＃13;

<ul class="menu">
  <li>
    <a>menu item 1</a>
    <ul>
      <li><a>sub menu item 1</a></li>
      <li><a>sub menu item 2</a></li>
      <li><a>sub menu item 3</a></li>
    </ul>
  </li>
  <li>
    <a>menu item 2</a>
    <ul>
      <li><a>sub menu item 4</a></li>
      <li><a>sub menu item 5</a></li>
      <li><a>sub menu item 6</a></li>
    </ul>
  </li>
</ul>

＆＃13;

Answer 2

您可以使用纯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

悬停时打开菜单

2 个答案: