css 如何设置子菜单的格式,使其像主导航一样工作,并在鼠标悬停在其上时保持打开状态?

cetgtptt  于 2023-02-17  发布在  其他
关注(0)|答案(1)|浏览(110)

我正在使用一个引导模板,并试图为第三个菜单项创建一个子菜单,该菜单项将显示四个子菜单项。首先,我无法使它们正确显示,而且我无法使它们保持打开状态以悬停在它们上方。我是一个设计师,而不是开发人员,但我正在尝试学习一些东西。有人能告诉我我做错了什么吗?
我已经看了很多问答,但是没有一个适合我。理想的情况下,我希望子菜单项是点,当你悬停在父菜单项上时会展开。一开始我试过了,几乎成功了,但是它们会在我悬停之前关闭,当你悬停在父菜单项上时也不会打开。我觉得我已经接近了。但我一整天都在练习这个。

<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%;
}
wvmv3b1j

wvmv3b1j1#

主要原因是边际底部:8px在最后一个a标签上,所以在菜单项和子菜单之间有一个间隙。我快速修复了这个问题。但是还有很多工作要做。

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 .has-nav-sub a,
.nav-menu .has-nav-sub a:focus {
  margin-bottom: 0px;
}

.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;
  display: block;
}

.main-nav>li:hover .nav-sub li span {
  width: 100%;
}

.nav-sub {
  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%;
}
<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 class="has-nav-sub"><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>

相关问题