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

Why bother using a list at all when you want the menu item to act as a single element, and the same with the sub-item? It's easy if you simply use nested divs, but then it's not much of a navigation aid. — isherwood
– isherwood, Commented Feb 8, 2013 at 18:16

Jako · Accepted Answer · 2013-02-08 18:17:35Z

1

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.

answered Feb 8, 2013 at 18:17

Jako

98214 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

DenErello Over a year ago

Thanks this is the solution which fits my needs the most. I'm think i'm changing the way of thinking in my menu. I'm going to use a div version: jsfiddle.net/DenErello/r35Tg/1 and then use a list in the first dive for main items and in the second div the others

Jako Over a year ago

Glad it helps, don't forget to tag the answer if it is the most appropriate ;), cheers

Omega · Accepted Answer · 2013-02-08 18:17:50Z

1

No javascript needed, add this to your css:

.Menu:hover ul { opacity: 1; }

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

answered Feb 8, 2013 at 18:17

Omega

3,0482 gold badges18 silver badges19 bronze badges

2 Comments

isherwood Over a year ago

And there it is, folks. Nice. I guess my brain just refused to let me treat the menu as one big item.

Omega Over a year ago

@isherwood Thanks. Yes had to think "slightly out of the box" for this!

zxqx · Accepted Answer · 2013-02-08 18:17:39Z

0

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.

answered Feb 8, 2013 at 18:17

zxqx

5,2352 gold badges22 silver badges28 bronze badges

1 Comment

DenErello Over a year ago

The reason behind opacity is no reason then learning from tutorials on the internet about it.

isherwood · Accepted Answer · 2013-02-08 18:17:41Z

0

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.

edited Feb 8, 2013 at 18:17

answered Feb 8, 2013 at 18:10

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

Comments

Talha Akbar · Accepted Answer · 2013-02-08 18:19:41Z

0

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

Fiddle

I think your code needs a dose of this.

answered Feb 8, 2013 at 18:19

Talha Akbar

10.1k7 gold badges41 silver badges62 bronze badges

Collectives™ on Stack Overflow

css dropdown menu hover with all drop downs

5 Answers 5

2 Comments

2 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related