下拉菜单不使用列表

问题描述 投票:1回答:1

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

我无法得到下拉列表,我无法弄清楚我做错了什么。

我将可见性设置为隐藏在下拉列中,并且可见性设置为在悬停时可见,但不会显示。如果我在下拉类中将可见性设置为可见,那么它显示为必须与我的悬停有关?

* {
  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>
html css drop-down-menu
1个回答
2
投票

另一个内部的锚标签是无效的语法 - 您可以在检查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>
© www.soinside.com 2019 - 2024. All rights reserved.