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

Question

我在 fiddle 上有这个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/

否则，我会赞同伊舍伍德并说你需要一些 JavaScript。