CODEWITHSUNDEEP
cssmenuhoversubmenu
jediah
jediah

Reputation: 102

Menu hover is not behaving correct, submenu hover disappears

The problem with this menu (http://thepiratehenk.nl/pgwe/) is that, when I hover the submenu to the right, it disappears.

(It also doesn’t work in Internet Explorer; that’s the next issue to fix.)

Upvotes: 0

Views: 3086

Answers (2)

Matt Coughlin
Matt Coughlin

Reputation: 18896

Add the following CSS rule:

.navi nav > ul > li:hover {
    z-index: 2;
}

This ensures that the current menu item and its submenu will always appear above the other menu items.

Two main issues

  1. Menu items overlapping other menu items
  2. Menu items overlapping the submenu of the previous menu items

Issue #1

Issue #1 is caused by having the :hover on the li, but performing the rotation on the a tag inside it (not having the :hover and rotation on the same element). This could be addressed in one of two ways:

1a. Temporarily give the current menu item (that the mouse is over) a larger z-index value than any other menu item. This may be doable with CSS alone using li:hover.

1b. Rotating the menu li rather than the a tag, and then unrotating the submenu ul tag inside it (so that :hover and rotation are on the same element).

Issue #2

The bottom corner of each menu item is sitting above the submenu of the previous menu items. The submenus should always be above all of the menu items.

The 1a solution mentioned above may fix issue #2 as well (setting the z-index of the menu li to a larger z-index on :hover.

Minor issue

Another issue, mentioned in the comments above and by @blackhawk, is having the .naarlinks div nested directly inside the ul tag. It now appears that this was in fact unrelated to the problem above, but it's still not safe to leave it like that. Aside from the risk of it causing odd behavior in some browsers, it will also prevent the HTML from validating.

The .naarlinks div appears to only have padding-left: 100px;. I'm not sure if that style was even taking effect, since the div is improperly nested, but if you do need that style, you could try adding it to the submenu ul in some way.

First, I'd recommend simply deleting the .naarlinks divs and see how that affects the page. Then see if you need to add any styling to the submenu ul tags to correct it.

After deleting the divs, try changing the padding in the submenu ul to the following:

.navi nav li ul {
    padding: 3px 10px 3px 110px;
}

Upvotes: 4

klewis
klewis

Reputation: 8340

You cannot have a div element as the first child inside of an un-ordered list. That is why your page is broken.

A basic structure of an unordered list usually looks like this...

<ul>
<li></li>
<li></li>
</ul>

not like this...

<ul>
<div>
<li></li>
<li></li>
</div>
</ul>

But to answer your question - you are missing one tinnnnny little thing in your css...

.navi nav li ul:hover { display:block }

Upvotes: 1

Related Questions