如何在第一次打开时按下第二个下拉菜单？

Question

这是我的问题：

当我将鼠标悬停在第一个（它们一个在另一个下方）上时，如何按下第二个下拉菜单？

这是我的 css：

#navMenu{
margin: 0;
padding: 0;
}

#navMenu ul{
margin: 0;
padding: 0;
line-height: 30px;
}

#navMenu li{
margin: 0;
padding: 0;
list-style: none;
float: left;
position: relative;
}
#navMenu ul li{
text-align: center;
height: 30px;
width: 150px;
display: block;
color:#eee;
background: #444;
background: rgba(0,0,0,.2);
box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
}
#navMenu ul ul{
position: absolute;
visibility: hidden;
top: 30px;
}

#navMenu ul li:hover ul{
visibility: visible;
}

谢谢大家..有了这个css，当我将鼠标悬停在第一个菜单上时，它会越过第二个菜单，单词就会混在一起..如果你知道我想说什么......

Answer 1

您的代码需要进行一些更改才能实现此目的。

首先，更改类的重复 ID。 ID 必须在页面中是唯一的。并为您的 'navMenu' 设置不同的 ID，例如 'navMenu-1' 和 'navMenu-2'.

之后，删除列表中背景的不透明度：

.navMenu ul li {
    text-align: center;
    height: 30px;
    width: 150px;
    display: block;
    color:#eee;
    background: #888; // change for your desired color
    background: rgba(0,0,0,.2); // remove this line
    box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
}

最后，只需在您的第一个菜单中设置一个 z-index。这将使这个菜单保持在第二个菜单之上：

#navMenu-1 ul li:hover ul {
    z-index: 2;
}

JSFiddle：http://jsfiddle.net/h2scv93e/1/

试一试，如果有帮助请告诉我！

Answer 2

对于这样的事情，您将需要 jQuery 的帮助才能将第二个 meunu 向下推。这是演示：http://jsfiddle.net/h2scv93e/2/

$(document).ready(function() {
    $('.menu1').hover(function() {
        $('.wrapper2').toggleClass('top100');
    });
});

.top100 {
    margin-top:100px;
}

如何在第一次打开时按下第二个下拉菜单？

How to push down second dropdown when open first ?

html

css

drop-down-menu