CODEWITHSUNDEEP
css
Torben
Torben

Reputation: 5494

CSS - Menubar changes width while hover

I created a menu and a submenu that should appear after I hover over the list elements of the main menu. The problem is that the widths of the main menu's list elements changes while hovering, and it looks puzzling. I tried it with a fixed width, but the space between the menu items is too big then.

I also tried to set the submenu to position absolute, but the problem was that the submenu was always located at the same position and not beneath the main menu's item which was active.

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;
}

Upvotes: 0

Views: 732

Answers (1)

Mark
Mark

Reputation: 19969

You can position the submenu below the main menu button by setting the main menu button to position: relative and placing the (absolute) submenu inside it. You then show/hide the submenu by toggling overflow: hidden and visible.

Here is a demo: http://codepen.io/seraphzz/pen/osGnh

Upvotes: 1

Related Questions