0

Всем привет, хочу сделать выпадающее меню как на картинке, чтобы при наведении на элемент списка появлялись другие вложеные списки. Сейчас имею меню без вложенности такого вида: https://jsfiddle.net/8wkzL14e/

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content>li {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}
<div class="dropdown">
  <a href="#">Menu</a>
  <div class="dropdown-content">
    <ul>
      <li>Smth</li>
      <li>Smth</li>
      <li>Smth</li>
      <li>Smth</li>
      <li>Smth</li>
    </ul>
  </div>
</div>

введите сюда описание изображения

0

1 ответ 1

0

.dropdown {
  position: relative;
  display: inline-block;
}

li>ul {
  display: none;
}

li:hover>ul {
  display: block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content>li {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}
<div class="dropdown">
  <a href="#">Menu</a>
  <div class="dropdown-content">
    <ul>
      <li>
        Smth sub
        <ul>
          <li>Smth sub
            <ul>
              <li>Smth</li>
              <li>Smth</li>
              <li>Smth</li>
              <li>Smth</li>
              <li>Smth</li>
            </ul>
          </li>
          <li>Smth</li>
          <li>Smth</li>
          <li>Smth sub
            <ul>
              <li>Smth</li>
              <li>Smth</li>
              <li>Smth</li>
              <li>Smth</li>
              <li>Smth</li>
            </ul>
          </li>
          <li>Smth</li>
        </ul>
      </li>
      <li>Smth</li>
      <li>Smth</li>
      <li>Smth</li>
      <li>Smth</li>
    </ul>
  </div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.