css下拉菜单悬停所有下拉菜单 [英] css dropdown menu hover with all drop downs

问题描述

我有这个css菜单的小提琴： http://jsfiddle.net/DenErello/pQhpu/

css：

  .Menu {
 background -color：＃3b69a2; 
 height：30px; 
} 
 .Menu，.Menu li {
 list-style：none; 
 padding：0; 
 margin：0; 
} 
。菜单li {
 float：left; 
 width：100px; 
 display：block; 
 line-height：30px; 
} 
 .Menu ul {
 opacity：0; 
} 
 .Menu ul li {
 line-height：20px; 
 background-color：＃3b69a2; 
} 
。菜单li：hover> ul {opacity：1; 
  

html：

 < ul class =Menu> 
< li>测试1 
< ul> 
< li>测试1.1< / li> 
< li> Test 1.2< / li> 
< / ul> 
< / li> 
< li>测试2 
< ul> 
< li>测试2.1< / li> 
< li>测试2.2< / li> 
< li>测试2.3< / li> 
< / ul> 
< / li> 
< / ul> 
  

现在，这是非常好的，所有的。但是我想要的是在进入主菜单项目的1后看到两个下拉菜单。我不能弄清楚，任何人如何做到这一点？此外，我想看到一个完整的100％宽度的背景和全高的下拉列表作为最大的下拉列表。我试着用背景和全部在ul，但似乎它不工作

解决方案

没有javascript需要，添加到你的css：

  .Menu：hover ul {opacity：1; } 
  

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

I have this css menu on fiddle: 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>

Now, this works great and all. But what I want is to see both drop down menus after going on 1 of the main menu items. I can't quite figure it out, anyone on how to do this? And in addition I'd like to see a full 100% width background with it and full height of the dropdown as the biggest dropdown. I tried with background and all on ul but it seems like it doesn't work

解决方案

No javascript needed, add this to your css:

.Menu:hover ul { opacity: 1; }

See it here http://jsfiddle.net/pQhpu/4/

这篇关于css下拉菜单悬停所有下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！