汉堡包菜单下方区域中的某些链接未显示为已链接，但页面下方的链接显示为已链接。我认为这是由于意外的不透明度设置造成的，但经过试验后我仍然无法确定问题所在。我只使用 HTML 和 CSS，不使用 Javascript。
“lorem ipsum”段落中的“amet”一词在所有情况下都是链接的，悬停时它应该从蓝色变为红色。但是，例如当视口(viewport)宽度为 900px 时，前两个实例不会显示为已链接。在 320 像素处，它只是第一个显示为未链接的，因此看起来覆盖固定高度的东西正在阻止链接正常显示。它是什么以及如何解决这个问题？
HTML
<body>
<nav role="navigation">
<div id="menuToggle">
<input type="checkbox" />
<span></span>
<span></span>
<span></span>
<ul id="menu">
<a href="#"><li>One</li></a>
<a href="#"><li>Two</li></a>
<a href="#"><li>Three</li></a>
<a href="#"><li>Four</li></a>
</ul>
</div>
</nav>
<h2>Title</h2>
<p>"Lorem ipsum dolor sit <a href="#">amet</a>, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>"Lorem ipsum dolor sit <a href="#">amet</a>, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>"Lorem ipsum dolor sit <a href="#">amet</a>, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>"Lorem ipsum dolor sit <a href="#">amet</a>, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
</body>
CSS
body
{
margin: 0;
padding: 0;
background: #ffffff;
color: #000000;
font-family: Arial, sans-serif;
}
a
{
text-decoration: none;
color: #000000;
transition: color 0.1s ease;
}
a:link {color: blue}
a:hover, a:active {color: red;}
a:visited {color: purple;}
#menuToggle
{
display: block;
position: relative;
top: 10px;
left: 50px;
z-index: 1;
-webkit-user-select: none;
user-select: none;
}
#menuToggle input
{
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
z-index: 2;
-webkit-touch-callout: none;
}
#menuToggle span
{
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #000000;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
opacity 0.55s ease;
}
#menuToggle span:first-child
{
transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2)
{
transform-origin: 0% 100%;
}
#menuToggle span:nth-last-child(3)
{
transform-origin: 0% 100%; background: #000000;
}
#menuToggle input:checked ~ span
{
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
}
#menuToggle input:checked ~ span:nth-last-child(3)
{
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#menuToggle input:checked ~ span:nth-last-child(2)
{
opacity: 1; background: #000000;
transform: rotate(-45deg) translate(0, -1px);
}
#menu
{
width: 200px;
margin: 30px 0 -180px -50px;
padding: 0 px;
padding-top: -10px;
background: #cccccc;
list-style-type: none;
-webkit-font-smoothing: antialiased;
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.2s cubic-bezier(0.77,0.2,0.05,1.0);
}
#menu li
{
padding: 10px 0;
font-size: 18px;
}
#menuToggle input:checked ~ ul
{
transform: scale(1.0, 1.0);
opacity: 1;
}
最佳答案
主要问题是“nav”标签覆盖了整个内容。
nav {display: inline-block;}
这应该有助于开始。
现在是关于语义的。
按钮应该是您代码的一部分，而不是与列表(“UL”)一起。
<a href="#"><li>One</li></a>
这是无效的。 <li><a href="#">One</a></li>是正确的。 “LI”总是应该是“UL”的第一个 child 。
这是您应该遵守的重要原则的链接:) - Best Principles
因此，您需要重新组织您的 html 代码。
干杯
关于html - 汉堡菜单下方几行的链接文本未显示为链接，但在更下方显示良好，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41129295/