Question

我在小提琴上有这个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，但似乎它没有工作

Answer 1

我不确定我是否真的理解，但是如果你在.Menu上使用悬停属性怎么办？当您将鼠标放在整个区域时，您可以显示两个菜单吗？

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

然后，要获得全宽，我会添加以下规则：

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

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

否则，我会说第二个isherwood并说你需要一些javascript。

Answer 2

不需要javascript，请将此添加到您的css：

.Menu:hover ul { opacity: 1; }

在此处查看http://jsfiddle.net/pQhpu/4/

Answer 3

您可以使用以下内容获取第一个触发两个子菜单的顶级项目：

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

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

它不适用于第二个顶级项目，因为相邻的兄弟选择器仅适用于以下兄弟。你需要JavaScript才能做到这一点。使用jQuery很容易。

Answer 4

您可以使用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。

Answer 5

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

Fiddle

我认为您的代码需要一定剂量。

css下拉菜单悬停所有下拉菜单

5 个答案: