Проблема, с которой вы сталкиваетесь в раскрывающемся меню, заключается в том, что контент должен быть дочерним по отношению к элементу меню «Исследования», что невозможно, если оно структурировано как есть. Создание меню с правильной семантикой значительно поможет.
Навигационное меню всегда должно быть заключено в элемент <nav> ( документы здесь ), а пункты меню создаются с использованием <ul> и <li> элементов (неупорядоченный список и элемент списка соответственно). Вот базовый c пример многослойной навигации, как у вас выше:
<nav>
<ul>
<li><a href='...'>Home</a></li>
<li class='dropdown'>
<a href='#'>Research</a>
<ul>
<li><a href='...'>Primary</a></li>
<li><a href='...'>Secondary</a></li>
</ul>
</li>
<li><a href='...'>Bio</a></li>
</ul>
</nav>
Как вы можете видеть выше, выпадающее меню «Исследования» - это еще один неупорядоченный список в списке «Исследования» вещь. Затем можно оформить раскрывающийся список, чтобы показать, когда над ним находится родительский элемент меню. При установке родительской позиции в относительное положение абсолютные дочерние элементы будут по умолчанию выравниваться по левому краю родительского элемента.
.dropdown {
position: relative;
}
.dropdown > ul {
display: none;
position: absolute;
}
.dropdown:hover > ul {
display: block;
}
Использование правильной семантики также улучшит результаты SEO, поможет программам чтения с экрана и сделает ваш код намного более ремонтопригодны. Это также поможет с последовательностью в вашем собственном коде. Надеюсь, это поможет!