html - 在悬停时在 css 菜单中的列表元素外添加填充

Question

我有一个 3 级的 CSS 菜单。当您将鼠标悬停在上一个级别元素上时，级别就会出现。

我想在第二层的右侧(深棕色部分)添加一个填充，以便在向右移动光标时第三层保持打开状态。这是为了防止在两个列表项之间移动鼠标时菜单消失。

我尝试在悬停时添加 padding-right，但它是添加在元素的内部而不是外部。

蓝色部分应该保持相同的大小，并且应该在它的右边添加填充，视觉上没有任何改变。

.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 元素的整个宽度上拉伸(stretch) a 元素:

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