Open menu when hovering

Question

I want to open menu when hovering the mouse over it , I tried to edit it from css but nothing there also I tried in the HTML aalso nothing happened so I think its something with the JavaScript code. and I'm not that familiar with JS so I need your help please.

This is my 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>   

this is my JS code that I use:

            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

Hope this helps.

 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 } 

 <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> 

Answer 2

You can do this with pure css.

here is the 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>

And here is the 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*/
}

And here is a working jsfiddle