css下拉菜单悬停在所有下拉菜单中答案

【问题标题】：css dropdown menu hover with all drop downscss下拉菜单悬停在所有下拉菜单中
【发布时间】：2013-01-24 13:54:26
【问题描述】：

我在小提琴上有这个 css 菜单：http://jsfiddle.net/DenErello/pQhpu/

css:

.Menu {
background-color: #3b69a2;
height: 30px;
}
.Menu, .Menu li {
list-style: none;
padding: 0;
margin: 0;
}
.Menu li {
float: left;
width: 100px;
display: block;
line-height: 30px;
}
.Menu ul {
opacity: 0;
}
.Menu ul li {
line-height: 20px;
background-color: #3b69a2;
}
.Menu li:hover > ul { opacity: 1; }

html:

<ul class="Menu">
<li>Test 1
    <ul>
        <li>Test 1.1</li>
        <li>Test 1.2</li>
    </ul>
</li>
<li>Test 2
    <ul>
        <li>Test 2.1</li>
        <li>Test 2.2</li>
        <li>Test 2.3</li>
    </ul>
</li>
</ul>

现在，这很好用。但我想要的是在进入主菜单项之一后查看两个下拉菜单。搞不懂了，有大神知道怎么弄吗？此外，我希望看到一个完整的 100% 宽度背景和下拉列表的完整高度作为最大的下拉列表。我尝试了背景和 ul 上的所有内容，但似乎它不起作用

【问题讨论】：

当您希望菜单项充当单个元素并且子项也是如此时，为什么还要使用列表呢？如果您只使用嵌套的 div，这很容易，但它并没有太多的导航帮助。

标签： css drop-down-menu hover

【解决方案1】：

您可以通过以下方式获得触发两个子菜单的第一个顶级项目：

http://jsfiddle.net/pQhpu/1/

.Menu li:hover + li ul { opacity: 1; }

它不适用于第二个顶级项目，因为相邻兄弟选择器仅适用于后续兄弟。为此，您需要 JavaScript。使用 jQuery 很容易。

【讨论】：

【解决方案2】：

我不确定我是否真的理解，但如果你在 .Menu 上使用 hover 属性会怎样？这样当您将鼠标悬停在整个区域上时，您会同时显示两个菜单？

.Menu:hover li ul { opacity: 1; }

然后，为了获得完整的宽度，我将添加以下规则：

.Menu:hover{height:auto;overflow:hidden}

http://jsfiddle.net/pQhpu/5/

否则，我会支持 isherwood 并说您需要一些 javascript。

【讨论】：

感谢这是最适合我需要的解决方案。我想我正在改变我在菜单中的思维方式。我将使用一个 div 版本：jsfiddle.net/DenErello/r35Tg/1，然后在第一次潜水中使用一个列表作为主要项目，在第二个 div 中使用其他人
很高兴它有帮助，如果它是最合适的，请不要忘记标记答案;)，干杯

【解决方案3】：

您可以使用 jQuery 轻松完成此操作。除非有理由使用 opacity 隐藏和显示下拉菜单，否则我建议您改用 display。

var menuItem = $(".Menu").children("li");

menuItem.on("mouseenter", function() {
  menuItem.children("ul").show();
});

menuItem.on("mouseleave", function() {
  menuItem.children("ul").hide();
});

见DEMO。

【讨论】：

不透明背后的原因是没有理由然后从互联网上的教程中学习。

【解决方案4】：

无需 javascript，将其添加到您的 css：

.Menu:hover ul { opacity: 1; }

看这里http://jsfiddle.net/pQhpu/4/

【讨论】：

就是这样，伙计们。好的。我想我的大脑只是拒绝让我把菜单当作一个大项目。
@isherwood 谢谢。是的，必须为此“稍微开箱即用”！

【解决方案5】：

.Menu li.main:hover ~ li > ul {
    opacity:1;
}

Fiddle

我认为您的代码需要一些这样的剂量。

【讨论】：