我正在使用一个引导模板，并试图为第三个菜单项创建一个子菜单，该菜单项将显示四个子菜单项。首先，我无法使它们正确显示，而且我无法使它们保持打开状态以悬停在它们上方。我是一个设计师，而不是开发人员，但我正在尝试学习一些东西。有人能告诉我我做错了什么吗？
我已经看了很多问答，但是没有一个适合我。理想的情况下，我希望子菜单项是点，当你悬停在父菜单项上时会展开。一开始我试过了，几乎成功了，但是它们会在我悬停之前关闭，当你悬停在父菜单项上时也不会打开。我觉得我已经接近了。但我一整天都在练习这个。
<html>
<body>
<header id="header" class="d-flex flex-column justify-content-center">
<nav id="navbar" class="navbar nav-menu">
<ul class="main-nav">
<li><a href="#home" class="scrollto active">H<span>Home</span></a></li>
<li><a href="#about" class="scrollto">A<span>About</span></a></li>
<li><a href="#portfolio" class="scrollto">P<span>Portfolio</span></a>
<ul class="nav-sub">
<li><a href="/loupe2.html"><span>Sub 1</span></a></li>
<li><a href="/apexdrop2.html"><span>Sub 2</span></a></li>
<li><a href="/coursework.html"><span>Sub 3</span></a></li>
<li><a href="/other.html"><span>Sub 4</span></a></li>
</ul>
</li>
</ul>
</nav>
</header>
</body>
</html>body {
font-family: "Open Sans", sans-serif;
color: #272829;
}
a {
color: #0563bb;
text-decoration: none;
}
a:hover {
color: #067ded;
text-decoration: none;
}
#header {
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 9997;
transition: all 0.5s;
padding: 15px;
overflow-y: auto;
}
.nav-menu {
padding: 0;
display: block;
position: relative;
}
.nav-menu * {
margin: 0;
padding: 0;
list-style: none;
}
.nav-menu ul {
position: relative;
white-space: nowrap;
}
.nav-menu a,
.nav-menu a:focus {
display: flex;
align-items: center;
color: rgba(26, 26, 26, 1);
padding: 10px 18px;
margin-bottom: 8px;
transition: 0.3s;
font-size: 15px;
border-radius: 50px;
background: #f2f3f5;
height: 56px;
width: 100%;
overflow: hidden;
}
.nav-menu a {
border: 4px #1a1a1a solid;
padding-left: 15px !important;
}
.nav-menu a span,
.nav-menu a:focus span {
padding: 0 5px 0 5px;
color: #1a1a1a;
display: none;
}
.nav-sub li,
.nav-sub li:focus {
display: none;
}
.nav-menu a:hover,
.nav-menu .active,
.nav-menu .active:focus,
.nav-menu:hover > a {
color: #fff;
background: #1a1a1a;
border: 4px white solid;
padding: 0 20px;
}
.nav-menu a:hover span,
.nav-menu .active span,
.nav-menu .active:focus span,
.nav-menu:hover > a span {
color: #fff;
}
.nav-menu a:hover,
.nav-menu:hover > a {
width: 100%;
color: #fff;
}
.nav-menu a:hover span,
.nav-menu:hover > a span {
display: block;
}
.main-nav > li:hover .nav-sub {
position: absolute;
width: 100%;
opacity: 1;
margin-bottom: 8px;
display: block;
}
.main-nav > li:hover .nav-sub li span {
width: 100%;
}
.nav-sub {
margin-bottom: 8px;
padding: 0;
position: absolute;
display: none;
width: 100%;
height: auto;
text-align: center;
opacity: 0;
transition: all 0.5s;
}
.nav-sub li {
display: flex;
margin: 0;
width: 100%;
}
1条答案
按热度按时间wvmv3b1j1#
主要原因是边际底部：8px在最后一个a标签上，所以在菜单项和子菜单之间有一个间隙。我快速修复了这个问题。但是还有很多工作要做。