2

我在小提琴上有这个 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 上的所有内容，但似乎它不起作用

4

5 回答 5

1

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

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

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

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

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

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

于 2013-02-08T18:17:35.133 回答
1

不需要 javascript，将其添加到您的 css 中：

.Menu:hover ul { opacity: 1; }

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

于 2013-02-08T18:17:50.083 回答
0 
.Menu li.main:hover ~ li > ul {
    opacity:1;
}

小提琴

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

于 2013-02-08T18:19:41.163 回答
0

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

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

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

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

于 2013-02-08T18:10:40.200 回答
0

你可以用 jQuery 很容易地做到这一点。除非您有理由opacity隐藏和显示下拉菜单，否则我建议您display改用。

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

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

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

见演示。

于 2013-02-08T18:17:39.063 回答