Question

如果我将鼠标悬停在按钮上，则下拉列表消失。可以帮我吗？现在，当我将鼠标悬停在按钮上时，它消失了。有谁知道如何解决这个问题？我没有在此下拉菜单上使用javascript。我正在学习，所以请帮助我我正在将其用于我的网站我不知道如何在此处添加更多文本，因为它不会发布我来自一个国家，不会说英语，所以不要因为英语不好而欺负我请帮助我

<script>
    window.__INITIAL_STATE__ = {"meReducer":{"me":{"id":1234,"groupId":789,"},},//more code removed};
</script>

css：

   <nav>
        <div class="dropdown">
          <a><img class="profile" src="profile.png" href="index.html"/></a>
          <button><a href="#" class="home">Nieuws</a></button>
          <div class="projects">
            <button>Koers<i class="fas fa-chevron-down"></i></button>
            <ul>
              <li><a href="nieuws.html">Weather App</a></li>
              <li><a  class="menulink"  href="#">Music App</a></li>
              <li><a href="#">React App</a></li>
              <li><a href="#">Youtube App</a></li>
            </ul>
          </div>
          <div class="products">
            <button>Kopen/Verkopen<i class="fas fa-chevron-down"></i></button>
            <ul>
              <li><a href="#">Cloud Service</a></li>
              <li><a href="#">Music Streaming</a></li>
              <li><a href="#">Consulting Help</a></li>
            </ul>
          </div>
          <div class="Contact">
            <li><a href="contact.html">Contact</a></li>
          </div>
        </div>
      </nav>

谢谢！

Answer 1

您需要将：hover伪元素添加到父元素而不是按钮中。

 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    height: 100vh;
    background-color: rgb(139, 62, 85);
    font-family: "Poppins", sans-serif;
  }
  a,
  button {
    font-family: "Poppins", sans-serif;
    color:white;
    text-decoration: none;
  }


.profile {
    width: 110px;
    height: 110px;
    background-color: hotpink;
    margin-left: -10px;
   
}
.header{ 
    background-color: hotpink;
    margin-left: -10px;
    margin-right: -50px;
    margin-top: -10px;
    margin-bottom: 150px;
  
}
.Contact{
    list-style:none;
    color:white;
    text-decoration: none;
}
  .dropdown {
    width: 60%;
    margin: auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  
  .projects,
  .products {
    position: relative;
  }
  
  .projects ul,
  .products ul {
    position: absolute;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    align-items: center;
    width: 200px;
    height: 200px;
    background: white;
    left: 0px;
    list-style: none;
    border-radius: 5px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: all 0.4s ease;

  }
  .projects li,
  .products li {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color:white;
  }
  
  .projects li:hover,
  .products li:hover {
    background-color: rgb(197, 173, 181);
   
   
  }
 
  .projects a,
  .products a {
    color: black;
    text-decoration: none;
  }
 
  
  .dropdown button,
  .home {
    background: none;
    text-decoration: none;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    
  }
  
  .projects:hover ul ,
  .products:hover ul{
    opacity: 1;
    pointer-events: all;
    transform: translateY(0px);
    
  }
.projects button ul{
  display: block;
}



  i{
    margin-left: 10px;
    align-items: center;
  }

<nav>
        <div class="dropdown">
          <a><img class="profile" src="profile.png" href="index.html"/></a>
          <button><a href="#" class="home">Nieuws</a></button>
          <div class="projects">
            <button>Koers<i class="fas fa-chevron-down"></i></button>
            <ul>
              <li><a href="nieuws.html">Weather App</a></li>
              <li><a  class="menulink"  href="#">Music App</a></li>
              <li><a href="#">React App</a></li>
              <li><a href="#">Youtube App</a></li>
            </ul>
          </div>
          <div class="products">
            <button>Kopen/Verkopen<i class="fas fa-chevron-down"></i></button>
            <ul>
              <li><a href="#">Cloud Service</a></li>
              <li><a href="#">Music Streaming</a></li>
              <li><a href="#">Consulting Help</a></li>
            </ul>
          </div>
          <div class="Contact">
            <li><a href="contact.html">Contact</a></li>
          </div>
        </div>
      </nav>

当我将鼠标悬停在按钮上时，下拉菜单消失

1 个答案: