Question

我有一个问题，在我将鼠标移离按钮之后，下拉菜单消失了。我的网站上有多个页面，并且仅在其中一些页面上发生。我以为是因为标头挡住了，但是不是，或者我无法修复它。任何想法如何解决。这是我的CSS和HTML

body {
  font-family: Calibri;
  margin: 0;
}

.Headers {
  background-color: cadetblue;
  font-family: Georgia;
}

#secondheader {
  margin-top: 0px;
  margin-bottom: 1px;
  padding-bottom: 20px;
  color: white;
}

.Menu {
  background-color: #ddd;
}

.Menu a {
  background-color: #ddd;
  font-size: 20px;
  padding: 4px;
  padding-right: 15px;
  text-decoration: none;
  color: black;
}

.Menu a:visited {
  color: black;
}

.Menu a:hover {
  background-color: gray;
}

.Menu ul {
  margin-top: 0px;
  padding-left: 0px;
}

.Menu li {
  display: inline;
  padding: 5px;
}

.dropbtn {
  background-color: #ddd;
  border: none;
  font-size: 20px;
  padding: 5px;
  padding-right: 15px;
  font-family: Calibri;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  min-width: 160px;
  z-index: -1;
}

.dropdown-content a {
  color: black;
  padding: 5px;
  text-decoration: none;
  display: block;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: gray;
}

.pagecontent {
  width: 250px;
}

.pagecontent h1 {
  color: white;
  font-family: Helvetica;
}

.pagecontent ul {
  color: white;
  font-size: 20px;
}

.pagecontent ul li {
  margin: 10px;
}

.pagecontent img {
  margin: 10px;
  margin-left: 30px;
  width: 150px;
  height: 200px;
  border: 1px solid white;
}

<body style="background-image:url(Images/BackgroundImage.jpeg);">
  <div class="Headers">
    <h1 style="margin-bottom:0px; margin-top:0px;">
      Details
    </h1>
    <h2 id="secondheader">
      Some things about me
    </h2>
  </div>
  <div class="Menu">
    <ul>
      <li>
        <a href="Default.aspx">Home</a>
      </li>
      <li>
        <a href="Details.aspx">Details</a>
      </li>
      <li>
        <a href="OnMe.aspx">On Me</a>
      </li>
      <li>
        <a href="Gallery.aspx">Gallery</a>
      </li>
      <li>
        <div class="dropdown">
          <button class="dropbtn">Links</button>
          <div class="dropdown-content">
            <a href="https://store.steampowered.com/app/730/CounterStrike_Global_Offensive/" target="_blank">Csgo</a>
            <a href="https://www.roblox.com/home" target="_blank">Roblox</a>
            <a href="https://www.minecraft.net/en-us" target="_blank">Minecraft</a>
            <a href="https://playvalorant.com/en-us/" target="_blank">Valorant</a>
          </div>
        </div>
      </li>
      <li>
        <a href="mailto:Gmail@gmail.com">Contact me</a>
      </li>
    </ul>
  </div>
  <div class="pagecontent">
    <h1>
      Details:
    </h1>
    <ul>
      <li>
        First Name: Asaf
      </li>
      <li>
        Last Name: Pro
      </li>
      <li>
        Class: yod 3
      </li>
      <li>
        Email:Gmail@gmail.com
      </li>
    </ul>
    <img src="Images/Asaf.jpg" />
  </div>
</body>

Answer 1

一个简单的问题，一个简单的解决方案：

从课程z-index: -1;中删除.dropdown-content。负Z索引将元素推到主体下面（逐层），这意味着它无法用鼠标悬停，因为您将悬停主体而不是下拉框。

body {
  font-family: Calibri;
  margin: 0;
}

.Headers {
  background-color: cadetblue;
  font-family: Georgia;
}

#secondheader {
  margin-top: 0px;
  margin-bottom: 1px;
  padding-bottom: 20px;
  color: white;
}

.Menu {
  background-color: #ddd;
}

.Menu a {
  background-color: #ddd;
  font-size: 20px;
  padding: 4px;
  padding-right: 15px;
  text-decoration: none;
  color: black;
}

.Menu a:visited {
  color: black;
}

.Menu a:hover {
  background-color: gray;
}

.Menu ul {
  margin-top: 0px;
  padding-left: 0px;
}

.Menu li {
  display: inline;
  padding: 5px;
}

.dropbtn {
  background-color: #ddd;
  border: none;
  font-size: 20px;
  padding: 5px;
  padding-right: 15px;
  font-family: Calibri;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  min-width: 160px;
}

.dropdown-content a {
  color: black;
  padding: 5px;
  text-decoration: none;
  display: block;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: gray;
}

.pagecontent {
  width: 250px;
}

.pagecontent h1 {
  color: white;
  font-family: Helvetica;
}

.pagecontent ul {
  color: white;
  font-size: 20px;
}

.pagecontent ul li {
  margin: 10px;
}

.pagecontent img {
  margin: 10px;
  margin-left: 30px;
  width: 150px;
  height: 200px;
  border: 1px solid white;
}

<body style="background-image:url(Images/BackgroundImage.jpeg);">
  <div class="Headers">
    <h1 style="margin-bottom:0px; margin-top:0px;">
      Details
    </h1>
    <h2 id="secondheader">
      Some things about me
    </h2>
  </div>
  <div class="Menu">
    <ul>
      <li>
        <a href="Default.aspx">Home</a>
      </li>
      <li>
        <a href="Details.aspx">Details</a>
      </li>
      <li>
        <a href="OnMe.aspx">On Me</a>
      </li>
      <li>
        <a href="Gallery.aspx">Gallery</a>
      </li>
      <li>
        <div class="dropdown">
          <button class="dropbtn">Links</button>
          <div class="dropdown-content">
            <a href="https://store.steampowered.com/app/730/CounterStrike_Global_Offensive/" target="_blank">Csgo</a>
            <a href="https://www.roblox.com/home" target="_blank">Roblox</a>
            <a href="https://www.minecraft.net/en-us" target="_blank">Minecraft</a>
            <a href="https://playvalorant.com/en-us/" target="_blank">Valorant</a>
          </div>
        </div>
      </li>
      <li>
        <a href="mailto:Gmail@gmail.com">Contact me</a>
      </li>
    </ul>
  </div>
  <div class="pagecontent">
    <h1>
      Details:
    </h1>
    <ul>
      <li>
        First Name: Asaf
      </li>
      <li>
        Last Name: Pro
      </li>
      <li>
        Class: yod 3
      </li>
      <li>
        Email:Gmail@gmail.com
      </li>
    </ul>
    <img src="Images/Asaf.jpg" />
  </div>
</body>

从父级移开后，下拉菜单消失了

1 个答案: