Show Sub-Menu On Hover With Main-Menu Overflow Hidden

There are many ideas to design a web site or any web application so there is no limit for your web development ideas but it comes to an end when you face any error or limitation or not a solution to your ideas in web development then you drop your magical idea and goes with the procedural old way so you do not have to do this.

Same here when you are working on a navigation menu, there are plenty of ideas available over the internet but that is useless if they do not match your ideas so same here we are with a solution of your idea where you got stuck. So when you are creating a side menu list that will have a sub-list that will be visible on hover. But the problem is that sub-list is hiding behind the parent DIV because of overflow-y: scroll; overflow-x: hidden; that you may need to give a limited fix area to your menu bar so now you may need a fixed height menu so if contain more item then it will show scroll bar in y-axis only and your width remain fixed due to your limitation.

So here we have a fix for this because it is not possible even via CSS3 so you must have to use JavaScript/JQuery but we made it easier by sharing a little code of Vanilla JavaScript. The logic behind is simple that it will just make your Sub-Menu as a position:fixed DIV with calculating the position of your mouse on hover only so then it will be shown over all other DIVs.

How To Show Sub-Menu On Hover With Main-Menu Overflow Hidden:

First add the below JavaSscrpt at the end of Web Page.

JavaScript:

document.querySelectorAll("li.sub_menu").forEach(function(item) {
  item.addEventListener("mouseover", function() {
        submenuWrapper = item.querySelector(".child"),
        menuItemPosTop = (item.offsetTop - document.querySelector("#sidebar > ul").scrollTop) + 20 + "px",
        menuItemPosLeft = Math.round(item.offsetWidth * 0.75) + "px"
    submenuWrapper.style.cssText = "top:" + menuItemPosTop + "; left:" + menuItemPosLeft;
  })
})

CSS:

Now add the below CSS at the start of Web Page.

#sidebar {
  position: relative;
}

ul {
  width: 160px;
  max-height: 400px;
  overflow-x: hidden;
  overflow-y: auto;
  list-style: none;
}

li {
  position: static;
}

li .child {
  position: absolute;
  z-index: 10;
  display: none;
}

li:hover > .child {
  display: block;
}

ul {
  margin: 1em;
  color: white;
  font-family: sans-serif;
  font-size: 16px;
}

li {
  padding: 1em;
}

li ul {
  margin: 0;
}

li .child {
  cursor: auto;
}

li .child li {
  padding: 12px 20px;
}

li:nth-child(2n) {
  background: #949494;
}

li:nth-child(2n+1) {
  background: #bbbbbb;
}

li.sub_menu {
  background: #505050;
  cursor: pointer;
}

HTML:

Finally add the below HTML where you want to show on Web Page.

<div id="sidebar">
  <ul>
    <li>XXX XXX XXX XXX</li>
    <li>XXX XXX XXX</li>
    <li>XXX XXX</li>
    <li>XXX</li>
    <li class="sub_menu">YYYYYYYYYYY
      <div class="child">
        <ul>
          <li>XXX XXX XXX</li>
          <li>XXX XXX</li>
          <li>XXX</li>
        </ul>
      </div>
    </li>
    <li>XXX XXX XXX XXX</li>
    <li>XXX XXX XXX</li>
    <li>XXX XXX</li>
    <li>XXX</li>
    <li>XXX XXX XXX XXX</li>
    <li>XXX XXX XXX</li>
    <li>XXX XXX</li>
    <li>XXX</li>
  </ul>
</div>

Last Words:

That’s all we have. If you have any problem with this code in your template then feel free to contact us with a full explanation of your problem. We will reply to you as time allows us. Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in the next article…