在懸停的css菜單中添加填充外列表元素

Question

我有一個css菜單，有3個級別。當您將鼠標懸停在上一個級別元素上時，級別就會出現。

我想添加一個填充到第二個級別（深褐色部分）的右側，以便第三個級別在向右移動光標時保持打開狀態。這是爲了防止在兩個列表項之間移動鼠標時菜單消失。

我試着在懸停上添加一個填充右鍵，但它被添加到元素的內部而不是外部。

藍色部分應保持相同的大小，填充應添加到它的右側，而不會在視覺上改變任何東西。

.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>

與填充：

沒有填充：（它應該是什麼樣子）

Answer 1

通過在我的<li>元素而不是<ul>元素上填充填充來解決此問題。

Answer 2

嘗試添加這種伸展在整個寬度a元素他們的父母li元素：

.main-navigation a { 
    display: inline-block; 
    width: 100%; 
}