Выпадающий список в меню с возможностью скролла

Question

В примере ниже возникла проблема с появлением подменю. Проблема заключается в том, что мне нужно, чтобы в блоке меню можно было бы скролить по координате x, для этого я прописываю overflow-x: scroll; Из-за чего часть меню, которая не влезла в 200px, а по y вся, скрывается. Пытался присвоить разные значения overflow-y, но подменю не появлялось как нужно, оно лишь появлялось в скрытой части и при включенном скролле по y, можно спустившись вниз увидеть подменю.

body {
  padding: 10px !important;
  font: 300 16px tahoma;
}

.nav {
  list-style: none;
  display: flex;
  width: 200px;
  overflow-x: scroll;
  scrollbar-width: none;
}

.nav::-webkit-scrollbar {
  display: none;
}

.nav li {
  position: relative;
  background: #34495e;
  transition: background 0.3s ease;
}

.nav>li:first-of-type {
  border-radius: 5px 0 0 5px;
}
.nav>li:last-of-type {
  border-radius: 0 5px 5px 0;
}

.nav li a {
  display: block;
  text-decoration: none;
  color: #fff;
  padding: 13px;
  border-radius: 5px;
}

.nav li:hover {
  background-color: #2C3E50;
}

.sub-nav {
  position: absolute;
  border-top: 15px solid transparent;
  list-style: none;
  padding: 0;
}

.triangle {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #34495e;
  position: absolute;
  margin-top: 5px;
  margin-left: 5px;
}

.triangle, .sub-nav {
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease;
}

.nav li:hover .triangle,
.nav li:hover .sub-nav {
  visibility: visible;
  opacity: 1;
}

.sub-nav li {
  white-space: nowrap;
}

.sub-nav>li:first-of-type {
  border-radius: 5px 5px 0 0;
}
.sub-nav>li:last-of-type {
  border-radius: 0 0 5px 5px;
}

.sub-nav a {
  font-size: 90%;
  margin: 3px;
  transition: background ease .3s;
}

.sub-nav>li:hover {
  background: #E74C3C;
}

<nav>
  <ul class="nav">
    <li><a href="">Главная</a></li>
    <li>
      <a href="">Подменю</a>
      <i class="triangle"></i>
      <ul class="sub-nav">
        <li><a href="">Подпункт 1</a></li>
        <li><a href="">Подпункт 2</a></li>
        <li><a href="">Подпункт 3</a></li>
        <li><a href="">Подпункт 4</a></li>
      </ul>
    </li>
    <li><a href="">Контакты</a></li>
  </ul>
</nav>

То есть, как я понимаю, мне нужно сделать так, чтобы подменю не было дочерним элементом меню, чтобы оно не обрезалось. Но тогда оно не будет привязано к пункту меню. Все что пришло в голову, это JS.

Можно ли как-то исправить проблему не используя JS?

БЛОГ НА HUSL

Выпадающий список в меню с возможностью скролла

Ответы (0 шт):