Menu links jump out from pannel after zoom - css

Question

Good evening,
I have problem with my menu links. When I see it on mobile and zoom it for text, links just jump out from pannel to next row.( http://www.abclinuxu.cz/data/prilohy/0/6/214560-img_1705-3567267490611876903.PNG ) I have set position fixed etc.. How can I force this bug? Thank you for advices!
HTML:
<div id="nabidka">
<div id='cssmenu'>
<ul>
<li><a href='#about'>O nás</a></li>
<li><a href='#cenik'>Ceník</a></li>
<li><a href='#sluzby'>Služby</a></li>
<li><a href='#kontakt'>Kontakt</a></li>
</ul>
</div>
</div>
CSS:
#nabidka {
width:550px;
height: 90px;
margin-left: 1.5em;
padding-top: 5px;
float:left;
}
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
list-style: none;
line-height: 80px;
margin: 0 auto;
}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu #menu-button {
display: none;
}
#cssmenu {
width: auto;
line-height: 80px;
height:90px;
}
#cssmenu > ul {
}
#cssmenu > ul > li {
float: left;
}
#cssmenu.align-center > ul {
font-size: 0;
text-align: center;
}
#cssmenu.align-center > ul > li {
display: inline-block;
float: none;
}
#cssmenu.align-right > ul > li {
float: right;
}
#cssmenu > ul > li > a {
font-size: 20px;
text-transform: ;
text-decoration: none;
color: white;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
#cssmenu > ul > li > a:hover,
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li.active > a {
color: #f26c4f;
}
#sipka {
position: absolute;
left: -1000px;
}
#cssmenu #menu-indicator {
position: absolute;
bottom: 0;
display: block;
height: 0;
width: 0;
border: 7px solid transparent;
border-bottom-color: white;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
-ms-transition: all 0.25s ease-out;
-o-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}

Answer 1

I cannot see what it is supposed to look like. Try to share a link to your html file.
However, I believe the issue lies in your CSS. You are using a combination of px values combined with em. Try to put the line-height for #cssmenu in em, perhaps that is the issue.

Answer 2

From a really fast look at your code, i think the issue is related to the element getting collapsed due to the "float: left".
This issue is easily fixed with .clearfix method Clearfix snippet. You fix this issue by placing the .clearfix class on the parent element or on any parent of the elements you float.
Another simple solution, which i would not recommend is using overflow:hidden;
Hope this helps.