StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Add the following CSS rule:</p> <pre><code>.navi nav > ul > li:hover { z-index: 2; } </code></pre> <p>This ensures that the current menu item and its submenu will always appear above the other menu items.</p> <p><strong>Two main issues</strong></p> <ol> <li>Menu items overlapping other menu items</li> <li>Menu items overlapping the submenu of the previous menu items</li> </ol> <p><strong>Issue #1</strong></p> <p>Issue #1 is caused by having the <code>:hover</code> on the <code>li</code>, but performing the rotation on the <code>a</code> tag inside it (not having the <code>:hover</code> and rotation on the same element). This could be addressed in one of two ways:</p> <p>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 <code>li:hover</code>.</p> <p>1b. Rotating the menu <code>li</code> rather than the <code>a</code> tag, and then unrotating the submenu <code>ul</code> tag inside it (so that <code>:hover</code> and rotation are on the same element).</p> <p><strong>Issue #2</strong></p> <p>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.</p> <p>The 1a solution mentioned above may fix issue #2 as well (setting the z-index of the menu <code>li</code> to a larger <code>z-index</code> on <code>:hover</code>.</p> <p><strong>Minor issue</strong></p> <p>Another issue, mentioned in the comments above and by @blackhawk, is having the <code>.naarlinks</code> <code>div</code> nested directly inside the <code>ul</code> 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.</p> <p>The <code>.naarlinks</code> <code>div</code> appears to only have <code>padding-left: 100px;</code>. I'm not sure if that style was even taking effect, since the <code>div</code> is improperly nested, but if you do need that style, you could try adding it to the submenu <code>ul</code> in some way.</p> <p>First, I'd recommend simply deleting the <code>.naarlinks</code> <code>div</code>s and see how that affects the page. Then see if you need to add any styling to the submenu <code>ul</code> tags to correct it.</p> <p>After deleting the <code>div</code>s, try changing the padding in the submenu <code>ul</code> to the following:</p> <pre><code>.navi nav li ul { padding: 3px 10px 3px 110px; } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload