时间戳

首页 > 解决方案 > 悬停时不出现下拉菜单

html - 悬停时不出现下拉菜单

问题描述

我试图弄清楚为什么我在右侧insnt上的下拉菜单在悬停时会起作用。它可能真的很简单，我错过了，我显然错过了！.vanish:hover .dropdown 似乎没有达到目的......我做错了什么？

https://plnkr.co/edit/Cnh6G1cGE1v4zCnuftgy?p=preview

.vanish:hover .dropdown {
   display: flex;
   flex-direction: column;
   position: absolute;
   left: -10px;
   top: -10px;
   background-color: #dcf1f2;
   border-radius: 10px;
}

标签： htmlcss

解决方案

您需要ul.dropdown在您的下方移动li：

<li class="vanish">
  <span>Account</span>
  <ul class="dropdown">
    <li><a href="#">Login</a></li>
    <li><a href="#">Sign Up</a></li>
  </ul>
</li>

一旦我这样做了，在悬停时它就会正确显示下拉菜单。（你还有一个额外的li标签）

Plunker：https ://next.plnkr.co/edit/leakntv0F7pMpnWL

推荐阅读