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

-1

当我将鼠标悬停在第一个（他们是一个在另一个之下）时，我如何能推下第二个下拉菜单？

这里是我的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当我将鼠标悬停在一个菜单它获得了第二和话只是得到混合..如果你知道我在想说...

来源

2015-02-05 Armin Humic

分享小提琴，再现您的问题。现在不可能帮到你。 – 2015-02-05 19:36:02

这里缺少一些难题。 – mmmmmpie 2015-02-05 19:37:16

这是小提琴，但在我的浏览器中，他们是一个在另一个下面... http：//jsfiddle.net/redrum96/h2scv93e/ – 2015-02-05 19:42:22

对于这样的事情，您需要jQuery的帮助来推下第二个meunu。继承人演示：http://jsfiddle.net/h2scv93e/2/

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

.top100 { 
    margin-top:100px; 
}

来源

2015-02-06 15:12:28 indubitablee

谢谢你工作：D – 2015-03-05 09:30:50

在你的代码中需要做一些改变来达到这个目的。

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

之后，去除背景的不透明度在您的LIS：

所有的

.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/

给它一个尝试，让我知道这是否有助于！

来源

2015-02-06 15:05:21

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

回答

相关问题