Pastein: <!doctype html> <html lang="ru"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Горизонтальное меню</title

Загрузка данных
<!doctype html>
<html lang="ru">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Горизонтальное меню</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="page">
    <header>
      <div class="header-card">
        <div class="header-title">Автомобили — вложенное меню</div>
        <div class="header-subtitle">Горизонтальное меню: наведите на пункт, чтобы открыть вложенный список.</div>
      </div>
    </header>

    <main>
      <nav id="nav" class="menu menu--horizontal" aria-label="Горизонтальная навигация">
        <ul>
          <li>
            <a href="#">Легковые</a>
            <ul class="second">
              <li><a href="#">Седан</a></li>
              <li><a href="#">Хэтчбек</a></li>
              <li><a href="#">Универсал</a></li>
            </ul>
          </li>

          <li>
            <a href="#">Внедорожники</a>
            <ul class="second">
              <li><a href="#">Кроссоверы</a></li>
              <li><a href="#">Полный привод</a></li>
              <li><a href="#">7-местные</a></li>
            </ul>
          </li>

          <li><a href="#">Интерьер</a></li>

          <li>
            <a href="#">Гибриды и электромобили</a>
            <ul class="second">
              <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>
            <ul class="second">
              <li><a href="#">Toyota</a></li>
              <li><a href="#">BMW</a></li>
              <li><a href="#">Mercedes</a></li>
            </ul>
          </li>
        </ul>
      </nav>
    </main>

    <footer>
      <div class="footer-card">Тема: автомобили. Вложенные категории открываются при наведении.</div>
    </footer>
  </div>
</body>
</html>


/* Общие сбросы */
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root{
  --bg1:#0b1020;
  --bg2:#0f2a43;
  --card:#0f1b2d;
  --text:#e8f1ff;
  --accent:#1f6feb;
  --accent2:#ff6b35;
  --accent3:#2dd4bf;
  --border:rgba(255,255,255,0.16);
}

body{
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text);
  min-height: 100vh;
  background:
    radial-gradient(900px 420px at 10% -10%, rgba(31,111,235,0.35), transparent 55%),
    radial-gradient(700px 420px at 90% 10%, rgba(45,212,191,0.25), transparent 55%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
}

/* Контейнеры для шапки/меню/футера */
.page{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

header,
main,
footer{
  width: min(1100px, 100%);
  margin-left: auto;
  margin-right: auto;
}

header{
  padding: 26px 16px 14px;
}

main{
  padding: 16px;
  flex: 1;
}

footer{
  padding: 18px 16px 28px;
}

.header-card{
  background: rgba(15, 27, 45, 0.75);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 18px 18px;
  backdrop-filter: blur(6px);
}

.header-title{
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.2px;
  margin-bottom: 8px;
}

.header-subtitle{
  opacity: 0.85;
  line-height: 1.35;
  font-size: 14px;
}

footer .footer-card{
  background: rgba(15, 27, 45, 0.55);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 14px 16px;
  backdrop-filter: blur(6px);
  opacity: 0.95;
}

/* Базовые стили меню */
#nav ul{
  list-style: none;
}

#nav{
  padding: 12px 0;
}

/* Ссылки меню */
#nav li a{
  display: block;
  background: linear-gradient(180deg, rgba(31,111,235,0.95), rgba(11,42,91,0.98));
  border: 1px solid rgba(255,255,255,0.18);
  color: #ffffff;
  padding: 12px 10px;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  border-radius: 12px;
  transition:
    transform 650ms ease,
    box-shadow 650ms ease,
    background 650ms ease;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  position: relative;
  overflow: hidden;
}

#nav li a::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,0),
      rgba(255,255,255,0.22),
      rgba(255,255,255,0));
  transform: translateX(-140%);
  transition: transform 900ms ease;
}

#nav li a:hover::before{
  transform: translateX(140%);
}

#nav li a:hover{
  background: linear-gradient(180deg, rgba(255,107,53,0.98), rgba(193,18,31,0.98));
  transform: translateY(-3px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.35);
}

/* Выпадающие пункты */
#nav li .second{
  display: none;
  position: absolute;
  min-width: 200px;
  padding-top: 10px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 500ms ease, transform 500ms ease;
}

#nav li:hover .second{
  display: block;
  opacity: 1;
  transform: translateY(0);
}

#nav li li{
  width: 200px;
}

#nav li li a{
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(20,61,122,0.95), rgba(7,26,54,0.98));
  border: 1px solid rgba(255,255,255,0.16);
}

#nav li li a:hover{
  background: linear-gradient(180deg, rgba(255,107,53,0.98), rgba(176,0,23,0.98));
}

/* Горизонтальное меню */
.menu--horizontal > ul > li{
  float: left;
  width: 200px;
  position: relative;
}

.menu--horizontal li .second{
  top: 100%;
  left: 0;
}

.menu--horizontal::after{
  content: "";
  display: table;
  clear: both;
}

/* Вертикальное меню */
.menu--vertical > ul > li{
  width: 200px;
  position: relative;
  float: none;
}

.menu--vertical li .second{
  left: 100%;
  top: 0;
}

<!doctype html>
<html lang="ru">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Вертикальное меню</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="page">
    <header>
      <div class="header-card">
        <div class="header-title">АВТОМОБИЛИ</div>
      </div>
    </header>

    <main>
      <nav id="nav" class="menu menu--vertical" aria-label="Вертикальная навигация">
        <ul>
          <li>
            <a href="#">Легковые</a>
            <ul class="second">
              <li><a href="#">Седан</a></li>
              <li><a href="#">Хэтчбек</a></li>
              <li><a href="#">Универсал</a></li>
            </ul>
          </li>

          <li>
            <a href="#">Внедорожники</a>
            <ul class="second">
              <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>
            <ul class="second">
              <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>
            <ul class="second">
              <li><a href="#">Samsung</a></li>
              <li><a href="#">LG</a></li>
              <li><a href="#">Philips</a></li>
            </ul>
          </li>
        </ul>
      </nav>
    </main>
  </div>
</body>
</html>


сделай это попроще
Больше возможностей при регистрации:
