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

I am trying to develop a drop-down submenu as one of five items in a menu. So basically four menu options that are links, and one that is a drop-down submenu (with links in the submenu). I have been able to do that, more or less, but the problem I have is that the submenu opens whenever the user mouses through the area where the submenu appears--even if the user does not first mouse over the top-level menu option.

I have found examples online that use the greater-than sign (not going to use it because not sure how that would be interpreted on the site) to distinguish between parent and child. I assume that's the answer, but it seems like no matter what I do, any mouse activity over the top-level menu option--or anywhere below it--will cause the submenu to open. I have tried a lot of options, and the below code is the best that I have--but it still doesn't address the problem. (I know there are accessibility options, and would appreciate any thoughts on those, but right now I can't even avoid what seems like it should be an easy problem to fix.)

Thank you in advance for your help.

Here is the CSS/HTML, using random colors/links/etc. that probably don't work together but are just placeholders to show what I have come up with so far:

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 ><a target="_top"  href="https://www.google.com">Google</a></p>
    </td>
    <td width=20%>
      <p ><a target="_top"  href="https://www.google.com">Google</a></p>
    </td>
    <td width=20%>
      <div ><p >Drop Down</p>
        <div >
          <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 ><a target="_top"  href="https://www.google.com">Google</a></p>
    </td>
    <td width=20%>
      <p ><a target="_top"  href="https://www.google.com">Google</a></p>
    </td>
  </tr>
</table>

CodePudding user response：

First off, you need to hide dropdown-content by default

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

and then show it when hovering over .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 ><a target="_top"  href="https://www.google.com">Google</a></p>
    </td>
    <td width=20%>
      <p ><a target="_top"  href="https://www.google.com">Google</a></p>
    </td>
    <td width=20%>
      <div >
        <p >Drop Down</p>
        <div >
          <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 ><a target="_top"  href="https://www.google.com">Google</a></p>
    </td>
    <td width=20%>
      <p ><a target="_top"  href="https://www.google.com">Google</a></p>
    </td>
  </tr>
</table>