CSS - 悬停时菜单栏更改宽度

Question

我创建了一个菜单和一个子菜单，当我将鼠标悬停在主菜单的列表元素上时，它们应该会出现。问题是主菜单的列表元素的宽度在悬停时会发生变化，看起来很费解。我用固定宽度试了一下，但是菜单项之间的空间太大了。

我还尝试将子菜单设置为绝对位置，但问题是子菜单始终位于同一位置，而不是在事件的主菜单项下方。

I created a codepen for this issue .

HTML:

<ul class="menubar">
  <li class="menubar-li"><a href="#">Unternehmen</a>
    <ul class="menubar-sub">
      <li class="menubar-sub-li"><a href="../html/profil.html">Profil</a>
      <li class="menubar-sub-li"><a href="../html/meilensteine.html">Meilensteine</a>
      <li class="menubar-sub-li"><a href="../html/team.html">Team</a>
      <li class="menubar-sub-li"><a href="../html/news.html">News</a>
      <li class="menubar-sub-li"><a href="../html/jobs.html">Jobs</a></li>
    </ul>
  </li>

  <li class="menubar-li"><a href="#">Kompetenzen</a>
    <ul class="menubar-sub">
  <li class="menubar-sub-li"><a href="../html/kreation.html">Kreation</a>
    <ul class="menubar-subsub">
      <li><a href="../html/strategie.html">Strategie</a>
      <li><a href="../html/design.html">Design</a>
      <li><a href="../html/online.html">Online</a>
      <li><a href="../html/reinzeichnung.html">Reinzeichnung</a></li>
    </ul>
  </li>

  <li class="menubar-sub-li"> <a href="../html/prepress.html">Prepress</a>
    <ul  class="menubar-subsub">
     <li><a href="../html/seitenproduktion.html">Seitenproduktion</a></li>
     <li><a href="../html/kreativretusche.html">Kreativretusche</a>
     <li><a href="../html/colormanagement.html">Colormanagement</a>
     <li><a href="../html/proofen.html">Proofen</a></li>
   </ul>
  </li>
  <li class="menubar-sub-li"><a href="../html/druck.html">Druck</a>
    <ul  class="menubar-subsub">
      <li><a href="../html/personalisiert.html">Personalisiert</a></li>
      <li><a href="../html/web2print.html">Web 2 Print</a></li>
    </ul>
  </li>

  <li class="menubar-sub-li"><a href="../html/katalogmanagement.html">Katalogmanagement</a></ul>
  </li>

  <li class="menubar-li"><a href="../html/portfolio.html">Portfolio</a></li>
    <li class="menubar-li"><a href="#">Service</a>
      <ul class="menubar-sub">
        <li class="menubar-sub-li"><a href="../html/mediapool.html">Mediapool</a></li>
        <li class="menubar-sub-li"><a href="../html/duon.html">DUON</a></li>
        <li class="menubar-sub-li"><a href="../html/datenupload.html">Datenupload</a></li>
        <li class="menubar-sub-li"><a href="../html/downloads.html">Downloads</a>
      </ul>
  </li>
  <li class="menubar-li"><a href="#">Kontakt</a>
     <ul class="menubar-sub">
       <li class="menubar-sub-li"><a href="../html/ansprechpartner.html">Ansprechpartner</a></li>
       <li class="menubar-sub-li"><a href="../html/anfahrt.html">Anfahrt</a></li>
       <li class="menubar-sub-li"><a href="../html/impressum.html">Impressum</a></li>
     </ul>
  </li>
</ul>

CSS:

.menubar {
    list-style: none;
    position: relative;
    bottom: 16px;
}

.menubar a {
    color: black;
    text-decoration:none;
    font-size: 13px;
    position: relative;
}

.menubar-li {
    float: left;
    height:29px;
    line-height:29px;
    vertical-align: middle;
    padding-left: 10px;
    padding-right: 10px;
    margin-right: 10px;
}

.menubar-li:hover {
    background-color: #94ba1d;
    cursor: pointer;
}

.menubar-li:hover .menubar-sub {
    display: block;
}

.menubar-sub {
    display: none;
    list-style: none;
    margin-top: 1px;
    padding-bottom: 10px;
    padding-right: 10px;
    padding-left: 0px;
    background-color: #94ba1d;
    position: relative;
    left: -10px;
}

.menubar-sub-li {
    line-height: 14px;
    padding-top: 5px;
    padding-left: 10px;
}

.menubar-subsub {
    display: none;
}

Answer 1

您可以通过将主菜单按钮设置为 position: relative 并将(绝对)子菜单放在其中，将子菜单定位在主菜单按钮下方。然后，您可以通过切换 overflow: hidden 和 visible 来显示/隐藏子菜单。

这是一个演示:http://codepen.io/seraphzz/pen/osGnh