CSS for long (scrolling) dropdown menu

Question

I'm trying to create a nested dropdown menu that may potentially be very long and overflow off the page.

What I'd like to do is, when the menu is too long it will display a scroll bar. I'm doing this with overflow: auto. However, when I do this, it traps any submenus within the same 'scroll space' as defined by the first scroll bar.

I've also tried various iterations of overflow: none with the :not(:hover) selector, but nothing I've tried seems to work.

What I'd like it to do is show the scrollbar on each level, only if necessary (i.e. that submenu would scroll off the page). Each submenu should 'pop' out of the previous scroll bar, if any, as if it was not there.

I'd like to do this in all CSS, but I'm open to a JS solution as well.

I have a code pen showing the issue here: https://codepen.io/mcmurphy510/pen/ZyGLKd

score 1 · Answer 1 · answered Jun 06 '17 at 21:51

I'm not sure if I'm understanding your question correctly, but try isolating your desired element by using ID or CLASS. See the third level menu.

#primary_nav_wrap {
  margin-top: 15px
}

#primary_nav_wrap ul {
  list-style: none;
  position: relative;
  float: left;
  margin: 0;
  padding: 0;
}

#primary_nav_wrap ul a {
  display: block;
  color: #333;
  text-decoration: none;
  font-weight: 700;
  font-size: 12px;
  line-height: 32px;
  padding: 0 15px;
  font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif
}

#primary_nav_wrap ul li {
  position: relative;
  float: left;
  margin: 0;
  padding: 0;
}

#primary_nav_wrap ul li.current-menu-item {
  background: #ddd
}

#primary_nav_wrap ul li:hover {
  background: #f6f6f6
}

#primary_nav_wrap ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  padding: 0;
}

#primary_nav_wrap ul ul li {
  float: none;
  width: 200px
}

#primary_nav_wrap ul ul a {
  line-height: 120%;
  padding: 10px 15px
}

#primary_nav_wrap ul ul ul {
  top: 0;
  left: 100%
}

#primary_nav_wrap ul li:hover > ul {
  display: block;
  height: 200px;
}

#primary_nav_wrap ul li ul li:not(:hover) {
}

/* ul li ul li ul li {
  overflow: auto;
} */

#subdeep {
  overflow: auto;
  height: 50px !important;
}

<h1>Simple Pure CSS Drop Down Menu</h1>
<nav id="primary_nav_wrap">
<ul>
  <li><a href="#">Menu 1</a>
    <ul>
      <li><a href="#">Sub Menu 1</a></li>
      <li><a href="#">Sub Menu 2</a></li>
      <li><a href="#">Sub Menu 3</a></li>
      <li><a href="#">Sub Menu 4</a>
        <ul>
          <li><a href="#">Deep Menu 1</a>
            <ul id="subdeep">
              <li><a href="#">Sub Deep 1</a></li>
              <li><a href="#">Sub Deep 2</a></li>
              <li><a href="#">Sub Deep 3</a></li>
                <li><a href="#">Sub Deep 4</a></li>
            </ul>
          </li>
          <li><a href="#">Deep Menu 2</a></li>
        </ul>
      </li>
      <li><a href="#">Sub Menu 5</a></li>
    </ul>
  </li>
</ul>
</nav>

score 0 · Answer 2 · answered Dec 01 '17 at 09:14

0

Probably you could use the proposed solution as the elements are positioned relative to each other and therefore the menu can set up some branches, you would "just" require to ensure that the parent element(s) remain visible

answered Dec 01 '17 at 09:14

hsc

356
2
16

Pawan Kumar · Answer 3 · 2017-07-03T20:23:38.033

-1

Mouse over on item "Link 3" will shows its sub-menu on the right side of it and then mouse over on "Link 31" for further sub menu.

.menu {
  position: relative;
}

ul {
  width: 200px;
  margin: 0;
  color: black;
  list-style:none;
  padding:0;
  max-height:100px;
  overflow-x: hidden;
  overflow-y: auto;
}

li {
  padding:0.5em;
}
li:hover{
  background-color:blue;
  color:white;
}
li .menu {
  position: absolute;
  z-index: 10;
  background-color:lightgrey;
  opacity: 0;
  transition: opacity 0.5s;
}
li:hover > .menu,
.menu:hover {
  opacity: 1;
}

li.parent {
  cursor: pointer;
}

.level2 {
  top: 0px;
  left: 200px;
}

<div class="menu">
  <ul>
    <li>Link1</li>
    <li class="parent">Link3...
      <div class="menu level2">
        <ul>
          <li class="parent">Link31...
            <div class="menu level2">
              <ul>
                <li>Link 311</li>
                <li>Link 312</li>
                <li>Link 313</li>
                <li>Link 314</li>
              </ul>
            </div>
          </li>
          <li>Link 32</li>
          <li>Link 33</li>
          <li>Link 34</li>
        </ul>
      </div>
    </li>
    <li>Link2</li>
    
    <li>Link1</li>
    <li>Link2</li>
    
  </ul>
</div>

edited Jul 03 '17 at 20:23

answered Jun 06 '17 at 19:45

Pawan Kumar

1,374
7
14

This is way buggy from what I can see. Sub-menus don't float off to the right as they are supposed to. – cjl750 Jun 06 '17 at 20:22
@cjl750 In the ques, he doesn't ask whether he want the sub-menu to be in right or in bottom, that's what I put the submenu in bottom. But now I have updated the code, please look into that. – Pawan Kumar Jun 06 '17 at 21:16
OP can probably clarify for sure, but judging by how his CodePen sample looked if you removed the troublesome `overflow: auto` style, I am assuming off to the right is what he meant by "Each submenu should 'pop' out of the previous scroll bar." Also, your edited answer above isn't working for me. I assume the problem is the typo in the closing tag for `li.parent`. – cjl750 Jun 06 '17 at 21:22
@cjl750. you are correct.. the menus should pop out 'off to the right' – mcmurphy Jun 06 '17 at 23:59
@cjl750 if you are pointing to the angular bracket >>, it's not the closing tag. Anyways again I updated the code. – Pawan Kumar Jun 07 '17 at 04:54
@PawanKumar been a while since I looked at this, but as I recall, OP has multiple levels of sub-menu, but this solution only worked for a second level, not third- and fourth-level menus. – cjl750 Jul 03 '17 at 20:11
@cjl750 I just gave the idea how can we show sub-menu. Anyways, I have updated my code. Could you please review it once? – Pawan Kumar Jul 03 '17 at 20:26
@PawanKumar I think I remember what the problem is now (though maybe you need to just update code a bit more? I have not tested extensively). In your example, as long as only one sub-nav is active, it works great. But suppose Link 2 also have sub menus under it. Then we hover Link 2, but we get the structure under Link 1 appearing. Since the top-level links are the most likely to have additional links under them, that doesn't seem like a sufficient solution unless OP just happens to really only need one link to function that way. Maybe you can find a way to fix it, though. – cjl750 Jul 03 '17 at 20:50

CSS for long (scrolling) dropdown menu

3 Answers3