Question

我只是在玩一些代码，并试图在不使用列表的情况下创建下拉菜单。

我无法显示下拉列表，也无法弄清楚自己在做什么错。

我在下拉菜单中将可见性设置为隐藏，将鼠标悬停时的可见性设置为可见，但不会显示。如果我在下拉菜单中将可见性设置为“可见”，那么这一定与悬停有关吗？

* {
  margin: 0;
  padding: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  display: grid;
  margin: 0px;
  grid-gap: 0px;
  grid-template-columns: 1fr;
  grid-template-rows: 70px calc(100vh - 70px);
}

.header {
  background: red;
  display: grid;
}

.header--container {
  width: 1160px;
  justify-self: center;
  display: grid;
  grid-column: 1;
  grid-row: 1;
  grid-auto-flow: column;
}

.header--container span:first-child {
  background: purple;
  display: grid;
  grid-auto-flow: column;
  justify-items: left;
  display: grid;
  align-items: center;
}

.header--container nav {
  background: black;
  display: grid;
  grid-auto-flow: column;
  justify-items: center;
  display: grid;
  align-items: center;
}

.header--container span:last-child {
  background: yellow;
  display: grid;
  grid-auto-flow: column;
  justify-items: right;
  display: grid;
  align-items: center;
}

.hero {
  background: blue;
  display: grid;
}

.hero--container {
  width: 1160px;
  justify-self: center;
  background: pink;
}

.site-navigation .menu-item {
  color: #fff;
  background: #3498db;
  display: block;
}

.site-navigation .menu-item a {
  color: #fff;
  text-decoration: none;
  display: block;
}

.site-navigation .menu-item:hover {
  background: #52a6df;
  cursor: pointer;
}

.dropdown {
  background: #52a6df;
  visibility: hidden;
  position: absolute;
  transition: visibility 0.65s ease-in;
  z-index: 999;
}

a:hover>.dropdown,
a .dropdown:hover {
  visibility: visible;
  z-index: 9999;
}

<div class="header">
  <div class="header--container">
    <span>
      <a href=""><img src="imgs/ID_Logo_Websitesmall.jpg" alt="logo" height="50px"></a>
    </span>
    <nav id="navigation" class="site-navigation" role="navigation">
      <a href="#" class="menu-item">News</a>
      <a href="#" class="menu-item">Snippets
        <div class="dropdown">
          <a href="#"class="menu-item sub-menu">CSS</a>
          <a href="#" class="menu-item sub-menu">HTML</a>
          <a href="#" class="menu-item sub-menu">jQuery</a>
          <a href="#" class="menu-item sub-menu">PHP</a>
          <a href="#" class="menu-item sub-menu">WordPress</a>
        </div>
      </a>
      <a href="#" class="menu-item">Inspiration</a>
      <a href="#" class="menu-item">Tools</a>
      <a href="#" class="menu-item">Tutorials</a>
    </nav>
    <span>
      <a href="">01442 817767</a>
    </span>
  </div>
</div>
<div class="hero">
  <div class="hero--container">cd</div>
</div>

Answer 1

另一个内部的锚标记是无效的语法-您可以在检查dropdown div移出并移到下一个兄弟元素的位置时看到。将a标签更改为说span-参见下面的演示

* {
  margin: 0;
  padding: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  display: grid;
  margin: 0px;
  grid-gap: 0px;
  grid-template-columns: 1fr;
  grid-template-rows: 70px calc(100vh - 70px);
}

.header {
  background: red;
  display: grid;
}

.header--container {
  width: 1160px;
  justify-self: center;
  display: grid;
  grid-column: 1;
  grid-row: 1;
  grid-auto-flow: column;
}

.header--container span:first-child {
  background: purple;
  display: grid;
  grid-auto-flow: column;
  justify-items: left;
  display: grid;
  align-items: center;
}

.header--container nav {
  background: black;
  display: grid;
  grid-auto-flow: column;
  justify-items: center;
  display: grid;
  align-items: center;
}

.header--container span:last-child {
  background: yellow;
  display: grid;
  grid-auto-flow: column;
  justify-items: right;
  display: grid;
  align-items: center;
}

.hero {
  background: blue;
  display: grid;
}

.hero--container {
  width: 1160px;
  justify-self: center;
  background: pink;
}

.site-navigation .menu-item {
  color: #fff;
  background: #3498db;
  display: block;
}

.site-navigation .menu-item a {
  color: #fff;
  text-decoration: none;
  display: block;
}

.site-navigation .menu-item:hover {
  background: #52a6df;
  cursor: pointer;
}

.dropdown {
  background: #52a6df;
  visibility: hidden;
  position: absolute;
  transition: visibility 0.65s ease-in;
  z-index: 999;
}

a:hover>.dropdown,
a .dropdown:hover {
  visibility: visible;
  z-index: 9999;
}

<div class="header">
  <div class="header--container">
    <span><a href=""><img src="https://via.placeholder.com/100" alt="logo" height="50px"></a></span>
    <nav id="navigation" class="site-navigation" role="navigation">
      <a href="#" class="menu-item">News</a>
      <a href="#" class="menu-item">Snippets
        <div class="dropdown">
          <span href="#"class="menu-item sub-menu">CSS</span>
          <span href="#" class="menu-item sub-menu">HTML</span>
          <span href="#" class="menu-item sub-menu">jQuery</span>
          <span href="#" class="menu-item sub-menu">PHP</span>
          <span href="#" class="menu-item sub-menu">WordPress</span>
        </div>
      </a>
      <a href="#" class="menu-item">Inspiration</a>
      <a href="#" class="menu-item">Tools</a>
      <a href="#" class="menu-item">Tutorials</a>
    </nav>
    <span><a href="">01442 817767</a></span>
  </div>
</div>
<div class="hero">
  <div class="hero--container">cd</div>
</div>

不使用列表的下拉菜单

1 个答案: