Как реализовать чтобы подпункты открывались на одном уровне с главным пунктом меню?

Для того чтобы подпункты открывались на одном уровне с главным пунктом меню в CSS, можно использовать позиционирование и селекторы.

Первым шагом я рекомендую создать HTML структуру для меню и его подпунктов. Вот пример:

<nav>
  <ul>
    <li><a href="#">Главный пункт</a>
      <ul>
        <li><a href="#">Подпункт 1</a></li>
        <li><a href="#">Подпункт 2</a></li>
        <li><a href="#">Подпункт 3</a></li>
      </ul>
    </li>
  </ul>
</nav>

Теперь можно приступить к настройке CSS стилей. Ниже представлен пример CSS кода, который позволит подпунктам открываться на одном уровне с главным пунктом:

nav ul {
  list-style-type: none;
  padding: 0;
}

nav ul li {
  position: relative;
  display: inline-block;
}

nav ul li ul {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
}

nav ul li:hover ul {
  display: block;
}

В этом примере мы использовали селектор nav ul для снятия стандартных отступов и маркеров списка. Затем мы применили position: relative к главному пункту меню, чтобы установить базовое положение подпунктов относительно него.

Далее, с помощью селектора nav ul li ul мы установили абсолютное позиционирование для подпунктов и указали top: 100%, чтобы они открывались ниже главного пункта. Также мы скрыли их с помощью display: none.

Наконец, с помощью селектора nav ul li:hover ul мы указали, что при наведении мыши на главный пункт меню, подпункты должны отображаться с помощью display: block.

Теперь подпункты будут открываться на одном уровне с главным пунктом меню при наведении на него. Вы можете настроить стили по своему вкусу, добавить анимации или изменить дизайн по необходимости.