Я собрал jsfiddle, чтобы проиллюстрировать мою проблему здесь. По сути, у меня есть абсолютно позиционированная система меню над моим основным контентом, но контент, кажется, плавает перед меню. Наведите указатель мыши на "Link 3", чтобы увидеть, что это просто основное содержание, которое его скрывает; меню появляются внизу, когда они достаточно длинны.
Мой навигационный заголовок выглядит примерно так:
<div id='nav-header'>
<div class='nav-bar'>
<div class='nav-item '>
<a class='link-3' href='#'>
<div class='nav-text-container'><p>Link 3</p></div>
</a>
<div class='flydown-container link-3'>
<div class='flydown'>
<div class='header'>Heading 1</div>
<ul>
<li><a class='secondary-menu-link' href='#'><span>Sub-link 1</span></a></li>
<li><a class='secondary-menu-link' href='#'><span>Sub-link 2</span></a></li>
<li><a class='secondary-menu-link' href='#'><span>Sub-link 3</span></a></li>
<li><a class='secondary-menu-link' href='#'><span>Sub-link 4</span></a></li>
<li><a class='secondary-menu-link' href='#'><span>Sub-link 5</span></a></li>
</ul>
<div class='header'>Heading 2</div>
<ul>
<li><a class='secondary-menu-link' href='#'><span>Sub-link 1</span></a></li>
<li><a class='secondary-menu-link' href='#'><span>Sub-link 2</span></a></li>
<li><a class='secondary-menu-link' href='#'><span>Sub-link 3</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
Там довольно много CSS, все это на этой jsfiddle ссылке выше.