html - 如何使水平下拉内容区域保持不变？

我正在尝试创建带有下拉内容框的水平菜单。我使用的垂直方法与子菜单在其父菜单：hover上展开时使用的方法相同。它工作正常，除了我似乎找不到找到一种方法，一旦光标从父元素本身移开，该方法就会强制下拉内容停留在周围。您可以在http://asubtleweb.com/clients/kingswood/处看到我的意思。...下拉内容不可单击，因为一旦鼠标从其父元素移开，它就会收缩。

这是我的CSS：

#header_menu nav { display: table; width: 30%; float: left; text-align: center; }
#header_menu nav ul, nav#mainmenu ul { list-style-type: none; }
#header_menu nav li { display: inline; margin-right: 2.5%; }
#header_menu nav a, nav#mainmenu a { font: 400 1.25em 'Oswald', sans-serif; color: black; text-transform: uppercase; }
#header_menu li .navhover { display: block; width: 100%; position: absolute; top: 50px; left: 0px; background-color: black; background-color: rgba(0,0,0,0.6); color: white; text-align: left; max-height: 0px; overflow: hidden; transition: all 1s linear; -wekbkit-transition: all 1s linear; }
#header_menu li:hover .navhover { max-height: 300px; min-height: 300px; }
#header_menu li .navhover article { margin: 20px; }
#header_menu li .navhover.news article { width: 30%; margin: 2.5% 0% 2.5% 2.5%; float: left; }

...以及我的HTML：

<div id="header_menu">
<nav>
<ul>

    <li id="mission">
      <a href="<?php bloginfo('wpurl'); ?>/mission">Mission</a>
      <div class="navhover">
        [[CONTENT]]
      </div>
    </li>

    <li id="news">
      <a href="#">News</a>
      <div class="navhover news">
          [[CONTENT]]
        </div>
    </li>

    <li id="reserve"><a href="#">Reserve</a></li>
</ul>
</nav>
</div>

我也尝试过使每个父元素成为自己的绝对定位的块，该块在：hover上扩展，没有运气。我没想到这个概念会有那么多麻烦，但这让我很沮丧。

最佳答案

只需将z-index: 1;添加到#header_menu li .navhover