StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POCSS Superfish Menu level 2 covers up level 1 Menu element
text
Body
copied!<p>I have a CSS related Problem with my superfish menu on <a href="http://redaxo.witconsult.de" rel="nofollow">http://redaxo.witconsult.de</a></p> <p>after figuring out most of the problems I now have the following issue: The menues where a 2nd level element is needed (submenues) blocks the level 1 element. The 1st level element can now never be selected! ("Leistungen" & "Kontakt") I know that in the original superfish this is not the case.</p> <p>I have tried working with position: relative; and z-index to solve this problem but it is not working. If it's not coming from the element being covered by another one I really have no idea whats going on... :(</p> <p>Thanks a lot!</p> <p>here is my css code: The more important stuff is further down where /** DEMO SKIN **/ starts</p> <pre><code> /*** ESSENTIAL STYLES ***/ .sf-menu, .sf-menu * { margin: 0; padding: 0; list-style: none; } .sf-menu { } .sf-menu ul { position: absolute; top: -999em; width: 10em; /* left offset of submenus need to match (see below) */ } .sf-menu ul li { width: 100%; } .sf-menu li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ } .sf-menu li { float: left; position: relative; } .sf-menu a { display: block; position: relative; } .sf-menu li:hover ul, .sf-menu li.sfHover ul { left: 0; top: 2.5em; /* match top ul list item height */ z-index: 99; } ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul { top: -999em; } ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul { left: 10em; /* match ul width */ top: 0; } ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul { top: -999em; } ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul { left: 10em; /* match ul width */ top: 0; } /** DEMO SKIN **/ .sf-menu { float: left; margin-bottom: 1em; } .sf-menu a { text-indent: 7px; color: #333; } .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/ color: #333; } .sf-menu li a:visited { /* visited pseudo selector so IE6 applies text colour*/ color: #333; } .sf-menu li li a:visited { /* visited pseudo selector so IE6 applies text colour*/ color: #DDD; } .sf-menu li { /*//// menu lvl 1 /////*/ color: #333; width: 118px; height: 25px; padding-top: 60px; font-weight: normal; font-size: 14px; text-decoration:none; position:relative; background: url(../images/menu/menuitem.png); z-index: 1; } .sf-menu li a:focus, .sf-menu li a:hover, .sf-menu li a:active { color: #DDD; top: -60px; height: 25px; padding-top: 60px; position:relative; background: url(../images/menu/menuitem-mo.png); z-index: 1; } .sf-menu li li { /*//// submenu lvl 2 /////*/ font-size: 12px; top: 50px; height: 21px; padding-top: 5px; background: url(../images/png_black40per.png); } .sf-menu li li a { color: #DDD; } .sf-menu li li a:focus, .sf-menu li li a:hover, .sf-menu li li a:active { color: #333; top: -5px; height: 21px; padding-top: 5px; background: url(../images/png_white40per.png); } </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