0

Здравствуйте выпадающий список верхнего меню не падает вниз, а вправо помогите сделать, чтобы он раскрывался вниз.

nav {
  margin: 0 auto;
}

nav:before {
  content: '';
  display: block;
  height: 50px;
  width: 100%;
  background: #464451;
  position: absolute;
  left: 0;
  z-index: -1;
  border-radius: 15px;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  height: 50px;
}

nav ul li {
  float: left;
}

nav ul li a {
  color: #fff;
  display: block;
  height: 50px;
  padding: 0 30px;
  text-decoration: none;
  line-height: 50px;
}

nav ul li a:hover {
  background: #b168b3f7;
}

nav ul ul {
  background-color: #464451;
  display: none;
  position: absolute;
  flex-direction: column;
}

nav ul li:hover ul {
  display: block;
  flex-direction: column;
}
<nav>
  <ul>
    <li>
      <div class="dom">
        <img src="assects/images/dom.svg" alt="">
      </div>
    </li>
    <li><a href="">История</a></li>
    <li><a href="">Категории использования</a>
      <ul>
        <li><a href="#">Изготовление тканей и органов</a></li>
        <li><a href="">Создание протезов</a></li>
        <li><a href="#">Печать инструментов</a></li>
        <li><a href="#">Фармацевтические исследования</a></li>
      </ul>
    </li>
    <li><a href="">Материал</a></li>
    <li><a href="">Постобработка</a></li>
    <li><a href="">Направления использования</a>
      <ul>
        <li><a href="#">Биопечать тканей</a></li>
        <li><a href="">Печать инструментов</a></li>
        <li><a href="#">Подготовка к операциямв</a></li>
        <li><a href="#">Протезирование и стоматология</a></li>
        <li><a href="#">«Печать» лекарств</a></li>
      </ul>
    </li>
  </ul>
</nav>

1 ответ 1

2

nav {
  margin: 0 auto;
}

nav:before {
  content: '';
  display: block;
  height: 50px;
  width: 100%;
  background: #464451;
  position: absolute;
  left: 0;
  z-index: -1;
  border-radius: 15px;
}

nav>ul {
  margin: 0;
  padding: 0;
  list-style: none;
  height: 50px;
}

nav>ul>li {
  float: left;
}

nav ul li a {
  color: #fff;
  display: block;
  height: 50px;
  padding: 0 30px;
  text-decoration: none;
  line-height: 50px;
}

nav ul li a:hover {
  background: #b168b3f7;
}

nav ul ul {
  background-color: #464451;
  display: none;
  position: absolute;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}

nav ul li:hover ul {
  display: block;
  flex-direction: column;
}
<nav>
  <ul>
    <li>
      <div class="dom">
        <img src="assects/images/dom.svg" alt="">
      </div>
    </li>
    <li><a href="">История</a></li>
    <li><a href="">Категории использования</a>
      <ul>
        <li><a href="#">Изготовление тканей и органов</a></li>
        <li><a href="#">Создание протезов</a></li>
        <li><a href="#">Печать инструментов</a></li>
        <li><a href="#">Фармацевтические исследования</a></li>
      </ul>
    </li>
    <li><a href="#">Материал</a></li>
    <li><a href="#">Постобработка</a></li>
    <li><a href="#">Направления использования</a>
      <ul>
        <li><a href="#">Биопечать тканей</a></li>
        <li><a href="">Печать инструментов</a></li>
        <li><a href="#">Подготовка к операциямв</a></li>
        <li><a href="#">Протезирование и стоматология</a></li>
        <li><a href="#">«Печать» лекарств</a></li>
      </ul>
    </li>
  </ul>
</nav>

1
  • Спасибо большое) 20 янв 2022 в 11:17

Ваш ответ

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

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