下拉列表不能停留在鼠标悬停上

Question

当我将鼠标悬停在其上时，我做了下拉列表，但是如果我将鼠标拖到列表项上，它将无法保持它的消失，每当我尝试通过鼠标悬停在列表项上来选择列表项时，我都会尝试很多次但它由我解决。

*{
    margin:0px;
    padding:0px;
    box-sizing:border-box;
}
body{
    height:100vh;
    background:#d936c6;
}
.dropdown{/*styling the dropdown container*/
    height:10vh;
    background:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    margin:auto;    
}
.project{
    position:relative;
}
.project ul{/* styling ul o*/
    position:absolute;
    background:#520348;
    margin-top:10px;
    width:200px;
    height:200px;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    list-style:none;
    border-radius:5px;
    opacity:0;
    pointer-event:none;
    transform:translateY(-10px);
    transition:all 0.4s ease;

}
.project a{
    text-decoration:none;
    color:#000;

}
.dropdown button{
    background:none;
    border:none;
    text-decoration:none;
    color:#000;
    cursor:pointer;
    font-size:18px;

}
.dropdown button:hover{
    background:rgb(224,224,224);

}
.project li{
    background:#5e2e58;
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;

}
.project li{
    background:#b581ae; 
}
.project button:hover + ul{
    opacity:1;
    transform:translateY(0px);
    pointer-event:all;

}
.project li:hover{
    background:#5e2e58;
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;

}

<div class="dropdown">
  <div class="project">
    <button>Project</button>
    <ul>
      <li>
        <a href="#">Weather app</a>
      </li>
      <li>
        <a href="#">Weather app</a>
      </li>
      <li>
        <a href="#">Weather app</a>
      </li>
      <li>
        <a href="#">Weather app</a>
      </li>
      <li>
        <a href="#">Weather app</a>
      </li>
    </ul>
  </div>
</div>

当我将鼠标悬停在其上时，我做了下拉列表，但是如果我将鼠标拖到列表项上，它将无法保持它的消失，每当我尝试通过鼠标悬停在列表项上来选择列表项时，我都会尝试很多次但它由我解决。

Answer 1

您将需要稍微重构HTML。问题是您的CSS指示在悬停按钮时将显示下拉列表UL。一旦将鼠标移离按钮，UL就会消失。

CSS技巧在仅CSS下拉菜单中有很好的记载： https://css-tricks.com/solved-with-css-dropdown-menus/

Answer 2

实际上，您只需将ul:hover,添加到.project button:hover + ul{

工作片段：

*{
    margin:0px;
    padding:0px;
    box-sizing:border-box;
}
body{
    height:100vh;
    background:#d936c6;
}
.dropdown{/*styling the dropdown container*/
    height:10vh;
    background:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    margin:auto;    
}
.project{
    position:relative;
}
.project ul{/* styling ul o*/
    position:absolute;
    background:#520348;
    margin-top:10px;
    width:200px;
    height:200px;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    list-style:none;
    border-radius:5px;
    opacity:0;
    pointer-event:none;
    transform:translateY(-10px);
    transition:all 0.4s ease;

}
.project a{
    text-decoration:none;
    color:#000;

}
.dropdown button{
    background:none;
    border:none;
    text-decoration:none;
    color:#000;
    cursor:pointer;
    font-size:18px;

}
.dropdown button:hover{
    background:rgb(224,224,224);

}
.project li{
    background:#5e2e58;
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;

}
.project li{
    background:#b581ae; 
}
ul:hover, /* added */
.project button:hover + ul{
    opacity:1;
    transform:translateY(0px);
    pointer-event:all;
}
.project li:hover{
    background:#5e2e58;
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;

}

<div class="dropdown">
  <div class="project">
    <button>Project</button>
    <ul>
      <li>
        <a href="#">Weather app</a>
      </li>
      <li>
        <a href="#">Weather app</a>
      </li>
      <li>
        <a href="#">Weather app</a>
      </li>
      <li>
        <a href="#">Weather app</a>
      </li>
      <li>
        <a href="#">Weather app</a>
      </li>
    </ul>
  </div>
</div>