菜单以 HTML 格式滑动

Question

当菜单上方菜单在HTML中滑动时。

代码和视图：

https://codepen.io/anon/pen/XvrJpx

演示：

.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>
<a href="index.php">Anasayfa</a>
</li>
<li>
<a href="#">c</a>
<ul>
<li>
<a href="#">c1</a>
</li>
</ul>
</li>
<li>
<a href="#">a</a>
</li>
<li>
<a href="#">Programlama</a>
<ul>
<li>
<a>Android</a>
</li>
<li>
Java
</li>
<li>
Php
</li>
<li>
Html
</li>
<li>
Css
</li>
<li>
Javascript
</li>
</ul>
</li>
<li>
<a href="#">Turizm</a>
</li>
<li>
<a href="#">Origami</a>
</li>
<li>
<a href="#">Bebek</a>
<ul>
<li>
<a href="#">Bebeklerin Aylık Gelişimi</a>
</li>
</ul>
</li>
<li>
<a href="iletisim.php">İletişim</a>
</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>

菜单C和菜单Bebek有子菜单。当菜单上方时，菜单会滑动。我不会滑倒。

如何解决此问题？

我需要你的帮助。

Answer 1

您所要做的就是删除浏览器的默认ul样式，因为它在左侧添加了40px的填充，并绝对定位子菜单项。 在您的情况下，这将起作用：

ul li ul {
padding: 0;
position: absolute;
}

为了使子菜单更易于阅读，我建议有一个背景和某种边框。 例如：

ul li ul {
padding: 0;
position: absolute;
background: white;
border: 1px solid black;
}

Answer 2

从中删除> ul

.menuu li:hover {
display: block;
}

这样菜单就不会滑倒 希望这是你需要的

.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>
<a href="index.php">Anasayfa</a>
</li>
<li>
<a href="#">c</a>
<ul>
<li>
<a href="#">c1</a>
</li>
</ul>
</li>
<li>
<a href="#">a</a>
</li>
<li>
<a href="#">Programlama</a>
<ul>
<li>
<a>Android</a>
</li>
<li>
Java
</li>
<li>
Php
</li>
<li>
Html
</li>
<li>
Css
</li>
<li>
Javascript
</li>
</ul>
</li>
<li>
<a href="#">Turizm</a>
</li>
<li>
<a href="#">Origami</a>
</li>
<li>
<a href="#">Bebek</a>
<ul>
<li>
<a href="#">Bebeklerin Aylık Gelişimi</a>
</li>
</ul>
</li>
<li>
<a href="iletisim.php">İletişim</a>
</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>