CSS - Menubar changes width while hover - css

Question

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">Unternehmen
<ul class="menubar-sub">
<li class="menubar-sub-li">Profil
<li class="menubar-sub-li">Meilensteine
<li class="menubar-sub-li">Team
<li class="menubar-sub-li">News
<li class="menubar-sub-li">Jobs</li>
</ul>
</li>
<li class="menubar-li">Kompetenzen
<ul class="menubar-sub">
<li class="menubar-sub-li">Kreation
<ul class="menubar-subsub">
<li>Strategie
<li>Design
<li>Online
<li>Reinzeichnung</li>
</ul>
</li>
<li class="menubar-sub-li"> Prepress
<ul class="menubar-subsub">
<li>Seitenproduktion</li>
<li>Kreativretusche
<li>Colormanagement
<li>Proofen</li>
</ul>
</li>
<li class="menubar-sub-li">Druck
<ul class="menubar-subsub">
<li>Personalisiert</li>
<li>Web 2 Print</li>
</ul>
</li>
<li class="menubar-sub-li">Katalogmanagement</ul>
</li>
<li class="menubar-li">Portfolio</li>
<li class="menubar-li">Service
<ul class="menubar-sub">
<li class="menubar-sub-li">Mediapool</li>
<li class="menubar-sub-li">DUON</li>
<li class="menubar-sub-li">Datenupload</li>
<li class="menubar-sub-li">Downloads
</ul>
</li>
<li class="menubar-li">Kontakt
<ul class="menubar-sub">
<li class="menubar-sub-li">Ansprechpartner</li>
<li class="menubar-sub-li">Anfahrt</li>
<li class="menubar-sub-li">Impressum</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

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