The menu slips in HTML - html

Question

when over menu the menu slips in HTML.
Codes and view:
https://codepen.io/anon/pen/XvrJpx
Demo:
.menuu {
position: absolute;
z-index: 1;
}
.menuu ul {
text-align: center;
}
.menuu>ul>li {
list-style: none;
float: left;
margin: 5px;
}
.menuu>ul>li>a {
text-decoration: none;
text-transform: uppercase;
background-color: white;
padding: 5px;
font-weight: 600;
font-size: 16px;
}
.menuu ul li a:hover {
color: white;
background-color: black;
}
.menuu ul li ul {
display: none;
}
.menuu li:hover>ul {
display: block;
}
.menuu ul li ul li a {
text-decoration: none;
}
.menuu>ul>li>ul>li {
list-style: none;
text-align: center;
margin: 5px;
padding: 5px;
}
.icerik {
position: absolute;
top: 75px;
}
<div class="menuu">
<ul>
<li>
Anasayfa
</li>
<li>
c
<ul>
<li>
c1
</li>
</ul>
</li>
<li>
a
</li>
<li>
Programlama
<ul>
<li>
<a>Android</a>
</li>
<li>
Java
</li>
<li>
Php
</li>
<li>
Html
</li>
<li>
Css
</li>
<li>
Javascript
</li>
</ul>
</li>
<li>
Turizm
</li>
<li>
Origami
</li>
<li>
Bebek
<ul>
<li>
Bebeklerin Aylık Gelişimi
</li>
</ul>
</li>
<li>
İletişim
</li>
</ul>
</div>
<div class="icerik">Önceden İçerik Aşağı kayıyordu email de dediğiniz gibi projeme position absolute ekledim kaymıyor. Teşekkür ederim. Şimdi Tek sorun Bebek Bölümü ve C bölümü üstüne gelince yana kayıyorlar ve yanındakini de kaydırıyorlar</div>
Menu C and menu Bebek have submenu. When over menu the menu slips. I doesn’t would slip.
How I can resolve this problem?
I need your help.

Answer 1

All you have to do is remove the browsers default ul styles, as it is adding 40px of padding to the left, and position the sub-menu items absolutely.
In your case, this will work:
ul li ul {
padding: 0;
position: absolute;
}
To make the sub-menu easier to read, I would recommend having a background and some sort of border. eg:
ul li ul {
padding: 0;
position: absolute;
background: white;
border: 1px solid black;
}

Answer 2

Remove > ul from
.menuu li:hover {
display: block;
}
so that menu doesnt slip
Hope this is what you need
.menuu {
position: absolute;
z-index: 1;
}
.menuu ul {
text-align: center;
}
.menuu>ul>li {
list-style: none;
float: left;
margin: 5px;
}
.menuu>ul>li>a {
text-decoration: none;
text-transform: uppercase;
background-color: white;
padding: 5px;
font-weight: 600;
font-size: 16px;
}
.menuu ul li a:hover {
color: white;
background-color: black;
}
.menuu ul li ul {
display: none;
}
.menuu li:hover {
display: block;
}
.menuu ul li ul li a {
text-decoration: none;
}
.menuu>ul>li>ul>li {
list-style: none;
text-align: center;
margin: 5px;
padding: 5px;
}
.icerik {
position: absolute;
top: 75px;
}
<div class="menuu">
<ul>
<li>
Anasayfa
</li>
<li>
c
<ul>
<li>
c1
</li>
</ul>
</li>
<li>
a
</li>
<li>
Programlama
<ul>
<li>
<a>Android</a>
</li>
<li>
Java
</li>
<li>
Php
</li>
<li>
Html
</li>
<li>
Css
</li>
<li>
Javascript
</li>
</ul>
</li>
<li>
Turizm
</li>
<li>
Origami
</li>
<li>
Bebek
<ul>
<li>
Bebeklerin Aylık Gelişimi
</li>
</ul>
</li>
<li>
İletişim
</li>
</ul>
</div>
<div class="icerik">Önceden İçerik Aşağı kayıyordu email de dediğiniz gibi projeme position absolute ekledim kaymıyor. Teşekkür ederim. Şimdi Tek sorun Bebek Bölümü ve C bölümü üstüne gelince yana kayıyorlar ve yanındakini de kaydırıyorlar</div>