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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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