Giving overflow value is hiding the nested sidenav

Question

I have created sidenav in the below stackblitz

I have given overflow-x: visible and overflow-y: auto/hidden so that, I should see vertical scrolling if there are more menu items. But this breaks, my nested sidemenu options which is seen under div and not above.

* Top Level Menu */
.nestedsidemenu ul {
  z-index: 100;
  margin: 0;
  padding: 0;
  position: relative;
  list-style: none;
  overflow-x: visible;
  overflow-y: scroll;

}

Due to this, my nested sidenav options are not seen.

Note: As of now, sidemenu in stackblitz is covering complete view. Please scroll or resize the output window to see the correct resolution

Expected

Any fix that can be given so that, I can see nested sidenav options?

Please check my solution when you have a chance. – Brandon McConnell Sep 06 '21 at 12:49 — Brandon McConnell, Sep 06 '21 at 12:49

score 2 · Answer 1 · answered Sep 01 '21 at 21:43

Quick fix here if I understand correctly what you're trying to achieve.

Add overflow: visible to .nestedsidemenu
Remove overflow-x: auto from .nestedsidemenu ul
Change .nestedsidemenu ul li to position: relative
Add top: 0 to .nestedsidemenu ul li:hover > ul (top-level, not in the media query)

Here it is in action:

/* Nested Side Bar Menu
    Project URL: http://www.dynamicdrive.com/style/csslibrary/item/nested_side_bar_menu/
*/

.nestedsidemenu {
  font: bold 16px 'Bitter', sans-serif;
  position: relative;
  width: 100px;
  overflow: visible;
}

/* Top Level Menu */
.nestedsidemenu ul {
  z-index: 100;
  margin: 0;
  padding: 0;
  position: relative;
  list-style: none;
  overflow-y: visible;
}

/* Top level list items */
.nestedsidemenu ul li {
  position: relative;
}

/* Top level menu items link style */
.nestedsidemenu ul li a,
.nestedsidemenu ul li span {
  display: block;
  position: relative;
  /* background of menu items (default state) */
  background: #008c9e;
  color: white;
  padding: 14px 10px;
  color: #2d2b2b;
  text-decoration: none;
}

.nestedsidemenu ul li a:link,
.nestedsidemenu ul li a:visited {
  color: white;
}

/* Top level menu items link style on hover and when active */
.nestedsidemenu ul li:hover > a {
  background: #005f6b;
}

/* Sub ULs style */
.nestedsidemenu ul li ul {
  position: absolute;
  left: -5000px;
  top: 0;
  opacity: 0;
  width: 230px;
  visibility: hidden;
  box-shadow: 2px 2px 5px gray;
  -webkit-transition: opacity 0.3s, visibility 0s 0.3s, left 0s 0.3s;
  transition: opacity 0.3s, visibility 0s 0.3s, left 0s 0.3s;
}

/* First Sub Levels UL style on hover */
.nestedsidemenu ul li:hover > ul {
  visibility: visible;
  left: 100%;
  top: 0;
  opacity: 1;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}

/* Sub level Menu list items (alters style from Top level List Items) */
.nestedsidemenu ul li ul li {
  display: list-item;
  float: none;
}

/* 2nd and beyond Sub Levels vertical offset after 1st level sub menu */
.nestedsidemenu ul li ul li ul {
  top: 0;
  left: 100%;
}

/* Sub Levels link style on hover and when active */
.nestedsidemenu ul ul li:hover > a {
  background: #52616a;
}

/* Sub Levels UL style on hover */
.nestedsidemenu ul ul li:hover > ul {
  left: 100%;
}

/* Sub level menu links style */
.nestedsidemenu ul li ul li a {
  font: normal 14px 'Bitter', sans-serif;
  padding: 10px;
  margin: 0;
  background: #4ea1d3;
  border-right: none;
  border-top-width: 0;
}

/* LIs with a sub UL style */
.nestedsidemenu ul li > a {
  /* add padding to accomodate arrow inside LIs */
  padding-right: 25px;
}

/* LIs with NO sub UL style */
.nestedsidemenu ul li > a:only-child {
  /* undo padding for non submenu LIs */
  padding-right: 10px;
}

/* LIs with a sub UL pseudo class */
.nestedsidemenu ul li > a:after {
  /* add arrow inside LIs */
  content: '';
  position: absolute;
  height: 0;
  width: 0;
  border: 5px solid transparent;
  border-left-color: #ffffff;
  top: 40%;
  right: 8px;
}

/* LIs with NO sub UL pseudo class */
.nestedsidemenu ul li > a:only-child:after {
  /* undo arrow for non submenu LIs */
  display: none;
}

/* ####### responsive layout CSS ####### */

@media (max-width: 923px) {
  /* FIRST breaking point
    Last top menu items' sub ULs should drop to the left (instead of right)
    Change 1 to a different number to exclude/include more top menu items based on menu and max-width setting above
  */

  .nestedsidemenu ul li:nth-last-of-type(-n + 1) ul li:hover > ul {
    left: -100%;
  }
}

@media (max-width: 500px) {
  /* SECOND breaking point 
    For mobile and screen browser windows
    Get Sub ULs to expand entire width of document and drop down
    Changes menu reveal type from "visibility" to "display" to overcome bug. See comments below
  */
  .nestedsidemenu {
    width: 100%;
  }

  .nestedsidemenu ul li > a:after {
    /* add arrow inside LIs */
    content: '';
    position: absolute;
    height: 0;
    width: 0;
    border: 5px solid transparent;
    border-left-color: transparent;
    border-top-color: #fff;
    top: 40%;
    right: 8px;
  }

  .nestedsidemenu ul li {
    position: static;
  }

  .nestedsidemenu ul li ul {
    width: 100%;
    border-top: 2px solid rgba(0, 0, 0, 0.6);
    /* change menu reveal type from "visibility" to "display". Former seems to cause browser to jump to top of page sometimes when menu header is tapped on */
    display: none;
  }

  .nestedsidemenu ul li:hover > ul {
    display: block;
    left: 0 !important;
    top: auto;
    box-shadow: 0 0 12px gray;
  }
}

<div class="nestedsidemenu">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="javascript:vold(0)">Folder 1</a>
  <ul>
      <li><a href="#">Sub Item 1.1</a></li>
      <li><a href="#">Sub Item 1.2</a></li>
      <li><a href="#">Sub Item 1.3</a></li>
      <li><a href="#">Sub Item 1.4</a></li>
      <li><a href="#">Sub Item 1.2</a></li>
      <li><a href="#">Sub Item 1.3</a></li>
      <li><a href="#">Sub Item 1.4</a></li>
  </ul>
</li>
<li><a href="javascript:vold(0)">Folder 2</a>
  <ul>
      <li><a href="#">Sub Item 2.1</a></li>
      <li><a href="#">Sub Item 2.2</a></li>
      <li><a href="javascript:vold(0)">Folder 2.3</a>
        <ul>
            <li><a href="#">Sub Item 2.3.1</a></li>
            <li><a href="#">Sub Item 2.3.2</a></li>
            <li><a href="#">Sub Item 2.3.3</a></li>
            <li><a href="#">Sub Item 2.3.4</a></li>
            </ul>
        </li>
      <li><a href="#">Sub Item 2.4</a></li>
      <li><a href="#">Sub Item 2.5</a></li>
      <li><a href="#">Sub Item 2.6</a></li>
      <li><a href="#">Sub Item 2.7</a></li>
  </ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="javascript:vold(0)">Folder 3</a>
  <ul>
      <li><a href="#">Sub Item 3.1</a></li>
      <li><a href="javascript:vold(0)">Folder 3.2</a>
        <ul>
            <li><a href="#">Sub Item 3.2.1</a></li>
            <li><a href="#">Sub Item 3.2.2</a></li>
            <li><a href="javascript:vold(0)">Folder 3.2.3</a>
                    <ul>
                        <li><a href="#">Sub Item 3.2.3.1</a></li>
                        <li><a href="#">Sub Item 3.2.3.2</a></li>
                        <li><a href="#">Sub Item 3.2.3.3</a></li>
                        <li><a href="#">Sub Item 3.2.3.4</a></li>
                        <li><a href="#">Sub Item 3.2.3.5</a></li>
                    </ul>
            </li>
            <li><a href="#">Sub Item 3.2.4</a></li>
        </ul>
      </li>
  </ul>
</li>
<li><a href="https://twitter.com/ddrivegeorge">Twitter</a></li>
</ul>
<br style="clear: left" />
</div>

If this does not answer your question, please clarify and I would be happy to adjust my solution accordingly.

if we remove overflow-x: auto, we face issue of vertical scroll if menu item increases. — Shoaib Chikate, Sep 07 '21 at 10:25
@ShoaibChikate If you want to prevent vertical-scrolling, just add `overflow-y: hidden` to the parent node,or ev en to the `body` itself if you're developing this is a single-page app. — Brandon McConnell, Sep 07 '21 at 13:58
I want vertical scrolling which is not der in current solution — Shoaib Chikate, Sep 07 '21 at 17:54
My original solution has no conflict with vertical scrolling. Could you please clarify what the issue with the original solution was? — Brandon McConnell, Sep 07 '21 at 20:33

score 1 · Answer 2 · answered Aug 22 '21 at 20:11

If you remove this overflow-y: hidden; option from the .nestedsidemenu ul you will solve this problem.

.nestedsidemenu ul {
  z-index: 100;
  margin: 0;
  padding: 0;
  position: relative;
  list-style: none;
  overflow-x: visible;
  /* overflow-y: hidden; */ /* remove this*/
}

.nestedsidemenu {
  font: bold 16px 'Bitter', sans-serif;
  position: relative;
  width: 100px;
}


/* Top Level Menu */

.nestedsidemenu ul {
  z-index: 100;
  margin: 0;
  padding: 0;
  position: relative;
  list-style: none;
  overflow-x: visible;
  /* overflow-y: hidden; */
  /* remove this*/
}


/* Top level list items */

.nestedsidemenu ul li {
  position: relative;
}


/* Top level menu items link style */

.nestedsidemenu ul li a,
.nestedsidemenu ul li span {
  display: block;
  position: relative;
  /* background of menu items (default state) */
  background: #008c9e;
  color: white;
  padding: 14px 10px;
  color: #2d2b2b;
  text-decoration: none;
}

.nestedsidemenu ul li a:link,
.nestedsidemenu ul li a:visited {
  color: white;
}


/* Top level menu items link style on hover and when active */

.nestedsidemenu ul li:hover>a {
  background: #005f6b;
}


/* Sub ULs style */

.nestedsidemenu ul li ul {
  position: absolute;
  left: -5000px;
  top: 0;
  opacity: 0;
  width: 230px;
  visibility: hidden;
  box-shadow: 2px 2px 5px gray;
  -webkit-transition: opacity 0.3s, visibility 0s 0.3s, left 0s 0.3s;
  transition: opacity 0.3s, visibility 0s 0.3s, left 0s 0.3s;
}


/* First Sub Levels UL style on hover */

.nestedsidemenu ul li:hover>ul {
  visibility: visible;
  left: 100%;
  opacity: 1;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}


/* Sub level Menu list items (alters style from Top level List Items) */

.nestedsidemenu ul li ul li {
  display: list-item;
  float: none;
}


/* 2nd and beyond Sub Levels vertical offset after 1st level sub menu */

.nestedsidemenu ul li ul li ul {
  top: 0;
  left: 100%;
}


/* Sub Levels link style on hover and when active */

.nestedsidemenu ul ul li:hover>a {
  background: #52616a;
}


/* Sub Levels UL style on hover */

.nestedsidemenu ul ul li:hover>ul {
  left: 100%;
}


/* Sub level menu links style */

.nestedsidemenu ul li ul li a {
  font: normal 14px 'Bitter', sans-serif;
  padding: 10px;
  margin: 0;
  background: #4ea1d3;
  border-right: none;
  border-top-width: 0;
}


/* LIs with a sub UL style */

.nestedsidemenu ul li>a {
  /* add padding to accomodate arrow inside LIs */
  padding-right: 25px;
}


/* LIs with NO sub UL style */

.nestedsidemenu ul li>a:only-child {
  /* undo padding for non submenu LIs */
  padding-right: 10px;
}


/* LIs with a sub UL pseudo class */

.nestedsidemenu ul li>a:after {
  /* add arrow inside LIs */
  content: '';
  position: absolute;
  height: 0;
  width: 0;
  border: 5px solid transparent;
  border-left-color: #ffffff;
  top: 40%;
  right: 8px;
}


/* LIs with NO sub UL pseudo class */

.nestedsidemenu ul li>a:only-child:after {
  /* undo arrow for non submenu LIs */
  display: none;
}


/* ####### responsive layout CSS ####### */

@media (max-width: 923px) {
  /* FIRST breaking point
    Last top menu items' sub ULs should drop to the left (instead of right)
    Change 1 to a different number to exclude/include more top menu items based on menu and max-width setting above
  */
  .nestedsidemenu ul li:nth-last-of-type(-n + 1) ul li:hover>ul {
    left: -100%;
  }
}

@media (max-width: 500px) {
  /* SECOND breaking point
    For mobile and screen browser windows
    Get Sub ULs to expand entire width of document and drop down
    Changes menu reveal type from "visibility" to "display" to overcome bug. See comments below
  */
  .nestedsidemenu {
    width: 100%;
  }
  .nestedsidemenu ul li>a:after {
    /* add arrow inside LIs */
    content: '';
    position: absolute;
    height: 0;
    width: 0;
    border: 5px solid transparent;
    border-left-color: transparent;
    border-top-color: #fff;
    top: 40%;
    right: 8px;
  }
  .nestedsidemenu ul li {
    position: static;
  }
  .nestedsidemenu ul li ul {
    width: 100%;
    border-top: 2px solid rgba(0, 0, 0, 0.6);
    /* change menu reveal type from "visibility" to "display". Former seems to cause browser to jump to top of page sometimes when menu header is tapped on */
    display: none;
  }
  .nestedsidemenu ul li:hover>ul {
    display: block;
    left: 0 !important;
    top: auto;
    box-shadow: 0 0 12px gray;
  }
}

<div class="nestedsidemenu">
  <ul>
    <li><a href="#">Item 1</a></li>
    <li>
      <a href="javascript:vold(0)">Folder 1</a>
      <ul>
        <li><a href="#">Sub Item 1.1</a></li>
        <li><a href="#">Sub Item 1.2</a></li>
        <li><a href="#">Sub Item 1.3</a></li>
        <li><a href="#">Sub Item 1.4</a></li>
        <li><a href="#">Sub Item 1.2</a></li>
        <li><a href="#">Sub Item 1.3</a></li>
        <li><a href="#">Sub Item 1.4</a></li>
      </ul>
    </li>
    <li>
      <a href="javascript:vold(0)">Folder 2</a>
      <ul>
        <li><a href="#">Sub Item 2.1</a></li>
        <li><a href="#">Sub Item 2.2</a></li>
        <li>
          <a href="javascript:vold(0)">Folder 2.3</a>
          <ul>
            <li><a href="#">Sub Item 2.3.1</a></li>
            <li><a href="#">Sub Item 2.3.2</a></li>
            <li><a href="#">Sub Item 2.3.3</a></li>
            <li><a href="#">Sub Item 2.3.4</a></li>
          </ul>
        </li>
        <li><a href="#">Sub Item 2.4</a></li>
        <li><a href="#">Sub Item 2.5</a></li>
        <li><a href="#">Sub Item 2.6</a></li>
        <li><a href="#">Sub Item 2.7</a></li>
      </ul>
    </li>
    <li><a href="#">Item 3</a></li>
    <li>
      <a href="javascript:vold(0)">Folder 3</a>
      <ul>
        <li><a href="#">Sub Item 3.1</a></li>
        <li>
          <a href="javascript:vold(0)">Folder 3.2</a>
          <ul>
            <li><a href="#">Sub Item 3.2.1</a></li>
            <li><a href="#">Sub Item 3.2.2</a></li>
            <li>
              <a href="javascript:vold(0)">Folder 3.2.3</a>
              <ul>
                <li><a href="#">Sub Item 3.2.3.1</a></li>
                <li><a href="#">Sub Item 3.2.3.2</a></li>
                <li><a href="#">Sub Item 3.2.3.3</a></li>
                <li><a href="#">Sub Item 3.2.3.4</a></li>
                <li><a href="#">Sub Item 3.2.3.5</a></li>
              </ul>
            </li>
            <li><a href="#">Sub Item 3.2.4</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="https://twitter.com/ddrivegeorge">Twitter</a></li>
  </ul>
  <br style="clear: left" />
</div>

If you remove overflow-y: hidden/auto, then if primary menu item increases, then we would need scrolling, hence we cannot remove that — Shoaib Chikate, Aug 23 '21 at 05:36
In that case you need to use javascript and place your the first submenus on the same level where is a `.nestedsidemenu`, because the main menu has a limited visual scope with properties `width: 100px; overflow-y: auto/hidden`and the css has no **bubling** events to solve pure css only. — Anton, Aug 23 '21 at 06:37

score 0 · Answer 3 · edited Sep 01 '21 at 09:48

Unfortunately, you cannot do that. You cannot have overflow-x at one value, and overflow-y at other. What ever you define, its gonna affect both (with overflow-y as priority).

If overflow-x is scroll, then overflow-y is auto.

Only way to fix it is:

on UL: Remove overflows, add width: 100px;

On div above it (nestedsidemenu): Add width: 1000px (or any value like calc(100vw + 20px) to hide scroll); Add overflow: auto;, add max-height: 450px;.

Also on body: Add overflow-x: hidden;

And you are good.

https://js-hn3i3v.stackblitz.io/

You cannot manipulate overflows like that. :)

Stackblitz link is not opening – Shoaib Chikate Sep 01 '21 at 10:38 — Shoaib Chikate, Sep 01 '21 at 10:38

score 0 · Answer 4 · edited Oct 21 '21 at 11:26

I applied this answer but also changed

/* Top level list items */
.nestedsidemenu ul li {
  position: relative;
}

so when main level menu increases in size you can still see the nested levels

Check it out: https://js-1icnj9.stackblitz.io/

Note: if you try to see on the smaller window of stackblitz, weirdly the texts under folder 5 disappear. Just open it in a full page and it should work fine

Giving overflow value is hiding the nested sidenav

4 Answers4