Для того чтобы подпункты открывались на одном уровне с главным пунктом меню в 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
.
Теперь подпункты будут открываться на одном уровне с главным пунктом меню при наведении на него. Вы можете настроить стили по своему вкусу, добавить анимации или изменить дизайн по необходимости.