css dropdown menu hover with all drop downs

Question

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

Answer 1

.Menu li.main:hover ~ li > ul {
    opacity:1;
}

Fiddle

I think your code needs a dose of this.

Answer 2

No javascript needed, add this to your css:

.Menu:hover ul { opacity: 1; }

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

Answer 3

You can do this pretty easily with jQuery. Unless there's a reason you're using opacity to hide and show the dropdowns, I'd recommend using display instead.

var menuItem = $(".Menu").children("li");

menuItem.on("mouseenter", function() {
  menuItem.children("ul").show();
});

menuItem.on("mouseleave", function() {
  menuItem.children("ul").hide();
});

See DEMO.

Answer 4

You can get the first top-level item triggering both sub-menus with this:

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

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

It doesn't work on the second top-level item because the adjacent sibling selector only applies to following siblings. You'll need JavaScript for this. It's easy with jQuery.

Answer 5

I am not sure I really understand, but what if you use the hover property on .Menu ? So that you have both menus display when you have your mouse over the whole area ?

.Menu:hover li ul { opacity: 1; }

Then, to have the full width, I would add the following rule :

.Menu:hover{height:auto;overflow:hidden}

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

Otherwise, I would second isherwood and say you need some javascript.