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

Posted

技术标签:

【中文标题】css下拉菜单悬停在所有下拉菜单中【英文标题】:css dropdown menu hover with all drop downs 【发布时间】:2013-01-24 13:54:26 【问题描述】:

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

【问题讨论】:

当您希望菜单项充当单个元素并且子项也是如此时,为什么还要使用列表呢?如果您只使用嵌套的 div,这很容易,但它并没有太多的导航帮助。 【参考方案1】:

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

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

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

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

【讨论】:

【参考方案2】:

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

.Menu:hover li ul  opacity: 1; 

然后,为了获得完整的宽度,我将添加以下规则:

.Menu:hoverheight:auto;overflow:hidden

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

否则,我会支持 isherwood 并说您需要一些 javascript。

【讨论】:

感谢这是最适合我需要的解决方案。我想我正在改变我在菜单中的思维方式。我将使用一个 div 版本:jsfiddle.net/DenErello/r35Tg/1,然后在第一次潜水中使用一个列表作为主要项目,在第二个 div 中使用其他人 很高兴它有帮助,如果它是最合适的,请不要忘记标记答案;),干杯【参考方案3】:

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

【讨论】:

不透明背后的原因是没有理由然后从互联网上的教程中学习。【参考方案4】:

无需 javascript,将其添加到您的 css:

.Menu:hover ul  opacity: 1; 

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

【讨论】:

就是这样,伙计们。好的。我想我的大脑只是拒绝让我把菜单当作一个大项目。 @isherwood 谢谢。是的,必须为此“稍微开箱即用”!【参考方案5】:
.Menu li.main:hover ~ li > ul 
    opacity:1;

Fiddle

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

【讨论】:

以上是关于css下拉菜单悬停在所有下拉菜单中的主要内容,如果未能解决你的问题,请参考以下文章

使用css在悬停时展开下拉菜单

悬停后保持下拉菜单打开(CSS)

CSS下拉菜单打开:悬停

css下拉菜单悬停时延迟1秒

CSS垂直下拉菜单,当悬停到其他菜单时子菜单显示

CSS菜单在没有悬停时下拉