1

I am trying to make a dropdown box with submenus appearing horizontally, which can also scroll vertically.

I have gotten everything working except for the scroll.

.dropdown-container {
  background: white;
  border: 1px solid #666;
  cursor: pointer;
  line-height: 24px;
  height: 24px;
  position: relative;
  width: 150px;
}
.dropdown-container a {
  color: black;
  padding: 0 10px;
  text-decoration: none;
}
.dropdown-container:after {
  color: #666;
  content: '\f107';
  font-family: FontAwesome;
  position: absolute;
  right: 2px;
  top: 0px;
} 
.dropdown-container:before {
  content: attr(data-content);
  padding: 0 10px;
}
.dropdown-container li > a:not(:only-child):after {
  content: '\f105';
  font-family: FontAwesome;
  position: absolute;
  right: 4px;
  top: 0px;
}
.dropdown-container ul {
  background: white;
  border: 1px solid #666;
  display: none;
  right: 1px; /*Why is it being nudged 1px right relative to parent?*/
  list-style: none;
  margin: 0;
  max-height: 80px;
  overflow-x: visible;
  overflow-y: auto; /*This is the problematic line, remove this and the rest works*/
  padding: 0;
  position: relative;
  width: 100%;
}
.dropdown-container:hover > ul {
  display: block;
}
.dropdown-container ul li {
  background: white;
  position: relative;
}
.dropdown-container ul li:hover {
  background: rgba(173, 216, 230, 0.6);
}
.dropdown-container ul li:hover > ul {
  display: block;
}
.dropdown-container ul ul {
  display: none;
  position: absolute;
  left: 150px;
  width: 150px;
  top: -1px; /*Another 1px adjustment required, why aren't they already aligned?*/
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="dropdown-container" role="nav" data-content="Title">
  <ul class="dropdown">
    <li>
      <a href="#">Select 1</a>
    </li>
    <li>
      <a href="#">Select 2</a>
      <ul>
        <li>
          <a href="#">Select 2.1</a>
          <ul>
            <li>
              <a href="#">Select 2.1.1</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">Select 2.2</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">Select 3</a>
    </li>
    <li>
      <a href="#">Select 4</a>
    </li>
  </ul>
</div>

See JSfiddle here. But if I set overflow-y on the <ul> to auto to enable scrolling then my submenus get hidden as in the snippet above.

I believe the problem is the same as in this question: when overflow-y: auto and overflow-x: visible, overflow-x is treated as auto too.

Unfortunately the solution suggested (wrapping the <ul> in a position: relative element) has not worked for me.

Does anyone know of another way around this?

S Meredith
  • 95
  • 9
  • why you want overflow-y auto? its working fine without it right, if you want horizontal scroll then you can write jquery click function instead of hover – charan kumar Aug 20 '18 at 11:36
  • I want vertical scroll, so I need overflow-y set to auto. If you look at the fiddle without overflow-y you can see the ul stretches beyond its parent. – S Meredith Aug 20 '18 at 11:58
  • Though you're right that one solution would be to handle the submenus as popups in javascript. That is just a direction I hadn't intended on going, I wouldn't know how off the top of my head. – S Meredith Aug 20 '18 at 12:25

0 Answers0