Question

我对网页设计还不熟悉，而且我一直在研究一种创建下拉菜单的CSS方式，该菜单最初出现在父div中。然而，一旦可见，我需要菜单保持不动，直到鼠标移出整个菜单。

我已经能够使菜单显示和消失，但它消失得太快 - 当我离开父div时消失。示例如下。

我尝试在第三个div中嵌套，在显示：块和显示之间切换：无但没有运气

代码

<div class="menuc">
<div class="menua"></div>
<div class="menub">
<p class="footertext">Home</p>
<p class="footertext">Home</p>
<p class="footertext">Home</p>
<p class="footertext">Home</p>
</div>
</div>

的CSS

.menua {
width:200px;
height:50px;
background-color:rgba(0, 0, 0, 0.50);
z-index:999;
}


.menua:hover ~ div.menub {
opacity:1;
z-index:999;
}

.menub {
width:200px;
height:600px;
background-color:rgba(0, 0, 0, 0.50);
opacity:0;
-webkit-transition: opacity .5s linear;
-moz-transition: opacity .5s linear;
-ms-transitiom: opacity .5s linear; 
-o-transition: opacity .5s linear; 
transition: opacity .5s linear;
z-index:999;
display:block;
}

.menuc {
display:none;
}

.menuc:hover {
display:block;
}

http://jsfiddle.net/qp3wu/

道歉，如果这是一个相当业余的错误（doh）。

非常感谢所有答案和建议

Answer 1

当.menub本身还悬停时，只需留下.menub元素：

.menua:hover ~ .menub, .menub:hover {
    opacity:1;
}

逗号用于定义新的选择器。以上内容与：

相同

 .menua:hover ~ .menub{
    opacity:1;
  }

.menub:hover {
    opacity:1;
}

但更短。

忽略任何事件;隐藏元素，但仍然使用不透明效果

现在要确保.menub不会对任何事件做出反应（例如悬停），你可以隐藏它：

.menua:hover ~ .menub, .menub:hover {
    visibility: visible;
    opacity:1;
}

并在悬停时再次显示：

.menub {
    visibility: hidden;
}

我使用css visibility来保持与仅opacity相同的效果。它仍然具有元素的空间（与display: none;不同;折叠空间）。

不可见时删除剩余空间

为了更进一步并修复剩余的间距，您可以添加height: 0;作为默认值，当悬停时将高度设置为所需的高度（在这种情况下为600px）。

删除menua和menub之间的gab

如果你想摆脱menua和menub之间的瞎扯但仍然使用默认边距，你可以重置第一个<p>元素的上边距：

.menub p:first-child
{
    margin-top: 0;
}

jsFiddle

菜单下方的文字显示，当元素不可见时，没有空格。

Answer 2

您需要进行一些更改：

使用menub div包裹menua以保持悬停效果：

<div class="menua">
 <div class="menub">
  <p class="footertext">Home</p>
  <p class="footertext">Home</p>
  <p class="footertext">Home</p>
 </div>
</div>

menub在menua内的两个位置我使用绝对位置。这样就可以避免子菜单移动其他元素。
```
.menua {
 position:relative;
}
.menub {
  position:absolute;
  top:100%;
  left:0;
}
```
三，您可以使用opacity发挥效果，但隐藏并显示您确实需要display属性：
```
 .menub {
   display:none;
 }
 .menua:hover div.menub {
   display:block;
 }
```

示例 http://jsfiddle.net/qp3wu/23/

下拉菜单消失

2 个答案:

jsFiddle