Pascal Claes Pascal Claes - 6 days ago 5
Sass (Sass) Question

add padding outside list element in a css menu on hover

I have a css menu with 3 levels. The levels appear as you hover over the previous level element.

I want to add a padding to the right side of the second level (the dark brown part) so that the 3rd level stays open when moving the cursor to the right. This is to prevent the menu from disappearing when you move the mouse in between the two list items.

I tried adding a padding-right on the hover, but it is added on the inside of the element instead of the outside.

The blue part should remain the same size, and the padding should be added to the right of it, without visually changing anything.



.list-item-2 {
/* hover over level 2 */
&.hover, &: hover {
padding-right: 100px;
box-sizing: content-box;
/* level 3 */
> ul {
background: $colorBrownLight;
max-height: 500px;
top: 0;
left: 230px;
@include opacity(1);
}
}
}

<nav class="main-navigation clearfix">
<ul class="menu">
<li class="even first menu-mlid-1601 list-item-1 list-parent list-parent-1 expanded targetInvisible">
<div class="toggler nolink-wrapper"><span title="" class="nolink">Ons aanbod</span>
</div>
<ul class="menu targetDepth1">
<li class="even first menu-mlid-2116 list-item-2 list-parent list-parent-2 expanded targetInvisible">
<a href="/nl/ons-aanbod/diversiteit" title="">Diversiteit</a><span class="toggler icon"></span>
<ul class="menu targetDepth2">
<li class="even first menu-mlid-2118 list-item-3 list-child leaf"><a href="/nl/ons-aanbod/diversiteit?audience%2525255B%2525255D=42" title="">Voor groepen</a>
</li>
<li class="odd last menu-mlid-2119 list-item-3 list-child leaf"><a href="/nl/ons-aanbod/diversiteit?audience%255B%255D=44" title="">Voor scholen</a>
</li>
</ul>
</li>
<li class="odd menu-mlid-2117 list-item-2 list-parent list-parent-2 expanded targetInvisible">
<a href="/nl/ons-aanbod/architectuur" title="">Architectuur</a><span class="toggler icon"></span>
<ul class="menu targetDepth2">
<li class="even first menu-mlid-2120 list-item-3 list-child leaf"><a href="/nl/ons-aanbod/architectuur?audience%25255B%25255D=42" title="">Voor groepen</a>
</li>
<li class="odd last menu-mlid-2121 list-item-3 list-child leaf"><a href="/nl/ons-aanbod/architectuur?audience%255B%255D=44" title="">Voor scholen</a>
</li>
</ul>
</li>
<li class="even last menu-mlid-1849 list-item-2 list-child leaf"><a href="/nl/beleef-de-stad/architectuur-stedenbouw-op-maat" title="">Architectuur op maat</a>
</li>
</ul>
</li>
<li class="odd menu-mlid-1857 list-item-1 list-child leaf"><a href="/nl/beleef-de-stad/hoe-reserveren" title="">Reserveren</a>
</li>
<li class="even menu-mlid-1604 list-item-1 list-parent list-parent-1 expanded targetInvisible">
<div class="toggler nolink-wrapper"><span title="" class="nolink">Over ons</span>
</div>
<ul class="menu targetDepth1">
<li class="even first menu-mlid-1684 list-item-2 list-child leaf"><a href="/nl/missie-en-visie">Missie en visie</a>
</li>
<li class="odd menu-mlid-1686 list-item-2 list-child leaf"><a href="/nl/werking">Werking</a>
</li>
<li class="even menu-mlid-1687 list-item-2 list-child leaf"><a href="/nl/geschiedenis">Geschiedenis</a>
</li>
<li class="odd menu-mlid-1688 list-item-2 list-child leaf"><a href="/nl/administratie" title="">Administratie</a>
</li>
<li class="even last menu-mlid-1685 list-item-2 list-child leaf"><a href="/nl/word-vriend">Word vriend</a>
</li>
</ul>
</li>
<li class="odd last menu-mlid-1673 list-item-1 list-child leaf"><a href="/nl/contactformulier" title="">Contact</a>
</li>
</ul>
</nav>





with padding:
with padding

without padding: (how it should look)
without padding

Answer

Solved it by putting the padding on my <li> elements instead of the <ul> element.

Comments