0

Имеется стандартное такая меню с подпунктами:

body {
  text-align: center;
  font-family: cursive;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

li {
  list-style: none;
  display: inline;
}

.drop_menu {
  opacity: 0;
}

.list_menu:hover .drop_menu {
  opacity: 1;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>ааа</title>
  <link rel="stylesheet" href="main.css">
</head>

<body>
  <header>
    <nav class="header">
      <ul class="menu">
        <li class="list_menu"><a href="#">Главная</a></li>
        <li class="list_menu"><a href="#">Смотреть</a>
          <ul class="drop_menu">
            <li><a href="#" target="_blank">Фильмы</a></li>
            <li><a href="#" target="_blank">Мультфильмы</a></li>
            <li><a href="#" target="_blank">Сериалы</a></li>
            <li><a href="#" target="_blank">Трейлеры</a></li>
          </ul>
        </li>
        <li class="list_menu"><a href="#">Контакты</a>
          <ul class="drop_menu">
            <li><a href="" target="_blank">Илья</a></li>
            <li><a href="">Артем</a></li>
            <li><a href="" target="_blank">Женя</a></li>
          </ul>
        </li>
      </ul>
    </nav>
  </header>
</body>

</html>

Почему в итоге получается все "пирамидой", а не в линию?

1 ответ 1

0

Потому что ваш "скрытый ul" изначально имеет display: block; и из-за себя переносит себя и последующие элементы на новую строку.

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

Вы можете использовать для него, например position: absolute;

body {
  text-align: center;
  font-family: cursive;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

li {
  list-style: none;
  display: inline;
}

.drop_menu {
  opacity: 0;
  position: absolute;
}

.list_menu:hover .drop_menu {
  opacity: 1;
}
<header>
  <nav class="header">
    <ul class="menu">
      <li class="list_menu"><a href="#">Главная</a></li>
      <li class="list_menu"><a href="#">Смотреть</a>
        <ul class="drop_menu">
          <li><a href="#" target="_blank">Фильмы</a></li>
          <li><a href="#" target="_blank">Мультфильмы</a></li>
          <li><a href="#" target="_blank">Сериалы</a></li>
          <li><a href="#" target="_blank">Трейлеры</a></li>
        </ul>
      </li>
      <li class="list_menu"><a href="#">Контакты</a>
        <ul class="drop_menu">
          <li><a href="" target="_blank">Илья</a></li>
          <li><a href="">Артем</a></li>
          <li><a href="" target="_blank">Женя</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</header>

Ваш ответ

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

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