如何解决CSS 定位 - mobilemenubar
我遇到了一个我不明白且不知道如何在项目中解决的问题。 我正在设计一个网站的移动菜单。 该问题仅发生在移动菜单中，因此要重现该问题，需要
菜单可以按预期使用右上角的汉堡图标展开。菜单工作正常，但当菜单未展开时，在菜单栏上的一些随机位置（只需将鼠标悬停在绿色区域上即可轻松找到它们），光标变为指针并单击启动菜单项（不可见）我不知道为什么可以在那里点击）
为了更容易定位问题，我将重要的代码行提取到此代码笔：https://codepen.io/bvonr/pen/rNMEpqZ
(function(){
var burger = document.querySelector('.burger-container'),header = document.querySelector('.header');
burger.onclick = function() {
header.classList.toggle('menu-opened');
menu-item.classList.toggle('activemenu');
}
}());/*Header generell */
.header {
width: 100%;
background: #24603c;
z-index: 2;
}
/* Mobiles Menü */
@media (max-width: 1023px) {
.header {
background: #24603c;
height: 50px;
width: 100%;
overflow: hidden;
transition: all 0.5s ease-out,background 1s ease-out;
transition-delay: 2.2s;
z-index: 1;
}
.header > a {
height: 50px;
}
.header > a > img {
height: 50px;
}
.header .burger-container {
position: relative;
display: inline-block;
height: 50px;
width: 50px;
cursor: pointer;
transform: rotate(0deg);
transition: all 0.3s cubic-bezier(0.4,0.01,0.165,0.99);
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.header .burger-container #burger {
width: 18px;
height: 8px;
position: relative;
display: block;
margin: -4px auto 0;
top: 50%;
}
.header .burger-container #burger .bar {
width: 100%;
height: 1px;
display: block;
position: relative;
background: #fff;
transition: all 0.3s cubic-bezier(0.4,0.99);
transition-delay: 0s;
}
.header .burger-container #burger .bar.topBar {
transform: translateY(0px) rotate(0deg);
}
.header .burger-container #burger .bar.btmBar {
transform: translateY(6px) rotate(0deg);
}
.header {
right: 0;
top: 0;
left: auto;
transform: translateX(0px);
transition: transform 0.5s cubic-bezier(0.4,0.99);
transition-delay: 0.65s;
}
.header ul.menu {
position: relative;
display: block;
padding: 0px 48px 0;
list-style: none;
}
.burger-container {
width: 50px;
float: right;
}
.header ul.menu li.menu-item {
border-bottom: 1px solid #fff;
margin-top: 5px;
transform: scale(1.15) translateY(-30px);
opacity: 0;
transition: transform 0.5s cubic-bezier(0.4,0.99),opacity 0.6s cubic-bezier(0.4,0.99);
}
.header ul.menu li.menu-item:nth-child(1) {
transition-delay: 0.49s;
}
.header ul.menu li.menu-item:nth-child(2) {
transition-delay: 0.42s;
}
.header ul.menu li.menu-item:nth-child(3) {
transition-delay: 0.35s;
}
.header ul.menu li.menu-item:nth-child(4) {
transition-delay: 0.28s;
}
.header ul.menu li.menu-item:nth-child(5) {
transition-delay: 0.21s;
}
.header ul.menu li.menu-item:nth-child(6) {
transition-delay: 0.14s;
}
.header ul.menu li.menu-item:nth-child(7) {
transition-delay: 0.07s;
}
.header ul.menu li.menu-item a {
display: block;
position: relative;
color: #fff !important;
font-weight: 100;
text-decoration: none;
font-size: 22px;
line-height: 2.35;
font-weight: 200;
width: 100%;
}
.header.menu-opened {
height: 100%;
background-color: #24603c;
transition: all 0.3s ease-in,background 0.5s ease-in;
transition-delay: 0.25s;
}
.header.menu-opened .burger-container {
transform: rotate(90deg);
}
.header.menu-opened .burger-container #burger .bar {
transition: all 0.4s cubic-bezier(0.4,0.99);
transition-delay: 0.2s;
}
.header.menu-opened .burger-container #burger .bar.topBar {
transform: translateY(4px) rotate(45deg);
}
.header.menu-opened .burger-container #burger .bar.btmBar {
transform: translateY(3px) rotate(-45deg);
}
.header.menu-opened ul.menu li.menu-item {
transform: scale(1) translateY(0px);
opacity: 1;
}
.header.menu-opened ul.menu li.menu-item:nth-child(1) {
transition-delay: 0.27s;
}
.header.menu-opened ul.menu li.menu-item:nth-child(2) {
transition-delay: 0.34s;
}
.header.menu-opened ul.menu li.menu-item:nth-child(3) {
transition-delay: 0.41s;
}
.header.menu-opened ul.menu li.menu-item:nth-child(4) {
transition-delay: 0.48s;
}
.header.menu-opened ul.menu li.menu-item:nth-child(5) {
transition-delay: 0.55s;
}
.header.menu-opened ul.menu li.menu-item:nth-child(6) {
transition-delay: 0.62s;
}
.header.menu-opened ul.menu li.menu-item:nth-child(7) {
transition-delay: 0.69s;
}
}<div class="header">
<a href="?module=start"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/logo%21_logo.svg/1920px-logo%21_logo.svg.png"></a>
<div class="burger-container">
<div id="burger">
<div class="bar topBar"></div>
<div class="bar btmBar"></div>
</div>
</div>
<ul class="menu">
<li class="menu-item">
<a href="?module=start">CLUB</a>
<ul class="menulist">
<li class="menulevel1">
<a class=" " href="Ueber-Uns">ÜBER UNS</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="Hockey">HOCKEY</a>
<ul class="menulist">
<li class="menulevel1">
<a class=" " href="Ueber-Uns">ÜBER UNS</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="Tennis">TENNIS</a>
<ul class="menulist">
<li class="menulevel1">
<a class=" " href="Ueber-Uns">ÜBER UNS</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="https://www.youtube.com/channel/UCDujF-QJ9YYeBxCHsFtz9Cg" target="_new">UHLEN.TV</a>
<ul class="menulist">
<li class="menulevel1">
<a class=" " href="Ueber-Uns">ÜBER UNS</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="?module=profile">MY.HTCU</a>
<ul class="menulist">
<li class="menulevel1">
<a class=" " href="Ueber-Uns">ÜBER UNS</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="?module=admin">ADMIN</a>
<ul class="menulist">
<li class="menulevel1">
<a class=" " href="Ueber-Uns">ÜBER UNS</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="tests">TESTSEITE</a>
<ul class="menulist">
<li class="menulevel1">
<a class=" " href="Ueber-Uns">ÜBER UNS</a>
</li>
</ul>
</li>
</ul>
</div>如果有人知道为什么菜单项会出现在那里以及我如何解决这个问题，我将非常感谢您的帮助。
我正在为网站编写无薪代码，所以我远非专家，希望得到任何帮助。
解决方法
原因是这一行...：
transform: scale(1.15) translateY(-30px)
...在 .header ul.menu li.menu-item:nth-child(1)
或者更准确地说是其中的 translateY(-30px)，它将所有菜单链接向上移动 30 像素。
由于您使用 li 隐藏了 opacity: 0 元素，因此顶部的 li 部分仍然存在；不可见，但可点击（即标题中未被 overflow: hidden 隐藏的部分）。
因此您应该在列表项上使用 display: none 而不是 opacity: 0（或在整个 ul 上使用更好），或者避免使用 transform: translateY(-30px) 设置
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
