Question

我正在尝试使用下拉内容框创建一个水平菜单。我正在使用与用于扩展的子项的垂直菜单相同的方法：将其父项悬停。它工作正常，除了我似乎找不到一种方法，一旦光标从父元素本身移动，强制下拉内容就会停留。您可以在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，没有运气。我没想到这个概念会有这么多麻烦，但它让我很难过。

Answer 1

正如Francesco Frapporti所指出的那样：

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

即可

修改：您的网站moveWindow is not defined发生错误，请参阅body元素

Answer 2

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

即可

Answer 3

只需将此添加到您的CSS ....

#header_menu li .navhover:hover{min-height:0;max-height:0;}

然后它应该工作得很好！

Answer 4

问题是您使用:hover的父元素实际上并没有触及＆＃34;子元素。因此父元素和子元素之间存在空间，这会导致父元素在将鼠标移向子元素时失去焦点。

选择您喜欢的方法来消除父母和孩子之间的差距。使父母更大，让孩子更接近父母，等等。

如何让横向下拉内容区域保持不变？

4 个答案: