如何防止在用户返回菜单之前重新打开下拉子菜单

Question

我正在尝试开发一个下拉子菜单作为菜单中五个项目之一。所以基本上有四个菜单选项是链接，一个是下拉子菜单（子菜单中有链接）。我已经或多或少地做到了这一点，但我遇到的问题是，只要用户将鼠标悬停在子菜单出现的区域时，子菜单就会打开——即使用户没有先将鼠标悬停在顶级菜单选项上.

我在网上找到了使用大于号（不打算使用它，因为不确定在网站上会如何解释）来区分父项和子项的示例。我认为这就是答案，但似乎无论我做什么，任何鼠标 activity 在顶级菜单选项上——或其下方的任何地方——都会导致子菜单打开。我已经尝试了很多选项，下面的代码是我所拥有的最好的——但它仍然没有解决问题。（我知道有辅助功能选项，如果有任何想法，我将不胜感激，但现在我什至无法避免看起来应该是一个容易解决的问题。）

提前感谢您的帮助。

这里是CSS/HTML，使用随机colors/links/etc。可能不能一起工作，但只是占位符来显示我到目前为止的想法：

CSS:

<style type="text/css")>
  .dropdown {
    display: inline-block;
    position: absolute;
}
  .dropdown-content {
    display: block;
    position: absolute;
    width: calc((100% - (var(--menuTotalBordersX, 0px)))/5); 
    min-width:196px;
    overflow: auto;
    box-shadow: 0px 10px 10px 0px #FFA500;
    text-align:center; 
    color:#ffffff;
    padding-top:5px;
    opacity: 0;
    transition: opacity 0.5s;
}
  .dropdown:hover .dropdown-content {
    opacity: 1;
    transition: opacity 1s;
}  
  dropdown:active .dropdown-content {
    opacity: 1;
    transition: opacity 1s;
} 
  .dropdown-content a {
    display: block;
    color: #ffffff;
    padding: 5px;
    text-decoration: none;
}
  .dropdown-content a:hover {
    color: #FFFFFF;
    background-color: #FFA500;
}
  a.dropdown-link:link, a.dropdown-link:visited {
    color:#ffffff;
    text-decoration:none;
}
  a.menu:link, a.menu:visited {
    color:#ffffff;
    text-decoration:none;
}
  a.menu:hover, a.menu:active {
    color:#FFA500;
    transition: color 0.5s;
}
  .menubutton {    
    text-align:center; 
    color:#ffffff;
}
  .menubutton-dropdown {    
    text-align:center; 
    color:#ffffff;
    margin-bottom:0px;
    padding-bottom:0px;
}
  .menubutton-dropdown:hover {
    color:#FFA500;
    transition: color 0.5s;
}
  .dropdown-content {
    clear: both;
}
</style>

HTML:

<table style="width: calc(100% - (var(--menuTotalBordersX, 0px))); min-width:980px;">
  <tr width=100%>
    <td width=20%>
       <p class="menubutton"><a target="_top" class="menu" href="https://www.google.com">Google</a></p>
    </td>
    <td width=20%>
      <p class="menubutton"><a target="_top" class="menu" href="https://www.google.com">Google</a></p>
    </td>
    <td width=20%>
      <div class="dropdown"><p class="menubutton-dropdown">Drop Down</p>
        <div class="dropdown-content">
          <a target="_top" href="https://www.google.com">Google</a>
          <a target="_top" href="https://www.google.com">Google</a>
          <a target="_top" href="https://www.google.com">Google</a>
        </div>
      </div>
    </td>
    <td width=20%>
      <p class="menubutton"><a target="_top" class="menu" href="https://www.google.com">Google</a></p>
    </td>
    <td width=20%>
      <p class="menubutton"><a target="_top" class="menu" href="https://www.google.com">Google</a></p>
    </td>
  </tr>
</table>

Answer 1

首先，你需要默认隐藏dropdown-content

.dropdown-content{
    display: none;
    position: absolute;
}

然后将鼠标悬停在 .dropdown

上时显示

  .dropdown:hover .dropdown-content {
    opacity: 1;
    transition: opacity 1s;
    display: block;
}

body {
  background-color: #000;
}
  .dropdown {
    display: inline-block;
    position: absolute;
}
  .dropdown-content {
    display: none;
    position: absolute;
    width: calc((100% - (var(--menuTotalBordersX, 0px)))/5); 
    min-width:196px;
    overflow: auto;
    box-shadow: 0px 10px 10px 0px #FFA500;
    text-align:center; 
    color:#ffffff;
    padding-top:5px;
    opacity: 0;
    transition: opacity 0.5s;
}
  .dropdown:hover .dropdown-content {
    opacity: 1;
    transition: opacity 1s;
    display: block;
}  
  .dropdown:active .dropdown-content {
    opacity: 1;
    transition: opacity 1s;
} 
  .dropdown-content a {
    display: block;
    color: #ffffff;
    padding: 5px;
    text-decoration: none;
}
  .dropdown-content a:hover {
    color: #FFFFFF;
    background-color: #FFA500;
}
  a.dropdown-link:link, a.dropdown-link:visited {
    color:#ffffff;
    text-decoration:none;
}
  a.menu:link, a.menu:visited {
    color:#ffffff;
    text-decoration:none;
}
  a.menu:hover, a.menu:active {
    color:#FFA500;
    transition: color 0.5s;
}
  .menubutton {    
    text-align:center; 
    color:#ffffff;
}
  .menubutton-dropdown {    
    text-align:center; 
    color:#ffffff;
    margin-bottom:0px;
    padding-bottom:0px;
}
  .menubutton-dropdown:hover {
    color:#FFA500;
    transition: color 0.5s;
}
  .dropdown-content {
    clear: both;
}

<table style="width: calc(100% - (var(--menuTotalBordersX, 0px))); min-width:980px;">
  <tr width=100%>
    <td width=20%>
      <p class="menubutton"><a target="_top" class="menu" href="https://www.google.com">Google</a></p>
    </td>
    <td width=20%>
      <p class="menubutton"><a target="_top" class="menu" href="https://www.google.com">Google</a></p>
    </td>
    <td width=20%>
      <div class="dropdown">
        <p class="menubutton-dropdown">Drop Down</p>
        <div class="dropdown-content">
          <a target="_top" href="https://www.google.com">Google</a>
          <a target="_top" href="https://www.google.com">Google</a>
          <a target="_top" href="https://www.google.com">Google</a>
        </div>
      </div>
    </td>
    <td width=20%>
      <p class="menubutton"><a target="_top" class="menu" href="https://www.google.com">Google</a></p>
    </td>
    <td width=20%>
      <p class="menubutton"><a target="_top" class="menu" href="https://www.google.com">Google</a></p>
    </td>
  </tr>
</table>

如何防止在用户返回菜单之前重新打开下拉子菜单

How to prevent drop-down submenu from reopening before the user gets back to the menu

css

submenu

drop-down-menu