下拉列表在您单击外部之前不会消失

Question

我正在网站上使用多级下拉菜单来获取用户选择，实际上它由许多级别（最多6个级别）组成，并且基于显示原理，而鼠标悬停在该字段上使它成为很难在其最后部分特别使用。因此，我正在寻找的是找到一些代码以使其在第一次悬停后一直保持到您单击它之外。  Ps：下拉菜单的元素是从数据库中提取的

</script>
<div id ="drop" >   
<ul class="top-level-menu">
    <li>
        <a href="#">Pick a TP! </a>
        <ul class="second-level-menu"  id ="drop">
             <?php while($row = mysqli_fetch_assoc($result)) { ?>
            <li>
                <a   href="#"><?php echo  $row["family"]; ?></a>
                <ul class="third-level-menu">
                    <?php
                    $sql1 = "SELECT DISTINCT product FROM $tabname WHERE family ='".$row["family"]."' ORDER BY product";
                    $result1 = mysqli_query($conn, $sql1);
                    while($row1 = mysqli_fetch_assoc($result1)) { ?>
                    <li>
                        <a  href="#"><?php echo  $row1["product"]; ?></a>
                        <ul class="forth-level-menu">
                            <?php
                            $sql2 = "SELECT DISTINCT insertion FROM $tabname WHERE family ='".$row["family"]."' AND product ='".$row1["product"]."'ORDER BY CASE insertion 
                            WHEN 'S1' THEN 1 WHEN 'S2' THEN 2 WHEN 'B3' THEN 3 WHEN 'B7' THEN 4 END";
                            $result2 = mysqli_query($conn, $sql2);
                            while($row2 = mysqli_fetch_assoc($result2)) { ?>
                             <li>
                                 <a  href="#"><?php echo  $row2["insertion"]; ?></a>
                                 <ul class="fifth-level-menu">
                                      <?php
                                        $sql3 = "SELECT DISTINCT tester FROM $tabname WHERE family ='".$row["family"]."' AND  product ='".$row1["product"]."' AND                                                                       insertion ='".$row2["insertion"]."' ORDER BY tester";
                                        $result3 = mysqli_query($conn, $sql3);
                                        while($row3 = mysqli_fetch_assoc($result3)) {?>
                                        <li>
                                            <a  href="#"><?php echo  $row3["tester"]; ?></a>
                                            <ul class="sixth-level-menu">
                                                <?php
                                                $sql4 = "SELECT DISTINCT test FROM $tabname WHERE family ='".$row["family"]."' AND  product ='".$row1["product"]."' AND                                                                         insertion ='".$row2["insertion"]."' AND  tester ='".$row3["tester"]."' ORDER BY test";
                                                $result4 = mysqli_query($conn, $sql4); 
                                                while($row4 = mysqli_fetch_assoc($result4)) {
                                                $val= $row1["product"].";".$row2["insertion"].";". $row3["tester"].";". $row4["test"];?>

                                                <li>
                                                <button id ="mybutton"class ="mybutton" onclick  = "myFunction(this.value);myFunction1(this.value);myFunction2(this.value);;myFunction3(this.value)" value ="<?php echo $val;?>"><?php echo $row4["test"]; ?>   </button>
                                                </li>
                                                <?php } ?>
                                            </ul>

                                     </li>
                                     <?php }    ?>
                                 </ul>   
                             </li>  
                            <?php } ?>
                        </ul>

                    </li>
                    <?php } ?>
                </ul>
            </li>
            <?php } ?>
        </ul>
    </li>
</ul>
</div>  
<style>
    /*level 6*/
svg > g:last-child > g:last-child { pointer-events: none }
div.google-visualization-tooltip { pointer-events: none }
.sixth-level-menu
{
    position: relative;
    top: -40px;
    left: 100%;

    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}
.mybutton 
{ font: bold 14px Arial, Helvetica, sans-serif;
  height: 40px;
  background-color: #999999; 
  border: none;
  text-align: center;
  text-decoration: none;
  color: white; 
  width:100%;   
}
.mybutton:hover {
  background-color: #CCCCCC;
  color: black;

    }

    /*level 5*/
.fifth-level-menu
{
    position: relative;
    top: -40px;
    left: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

.fifth-level-menu > li
{
    height: 40px;
    background: #999999;
}
.fifth-level-menu > li:hover { background: #CCCCCC; }   
/*level 4*/
.forth-level-menu
{   text-align: center;
    position: relative;
    left: 100%;
    top: -40px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

.forth-level-menu > li
{
    height: 40px;
    background: #999999;
}
.forth-level-menu > li:hover { background: #CCCCCC; }   
/*level 3*/ 
.third-level-menu
{   text-align: center;
    position: relative;
    top: -40px;
    left: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

.third-level-menu > li
{
    height: 40px;
    background: #999999;
}
.third-level-menu > li:hover { background: #CCCCCC; }
/*level 2*/
.second-level-menu
{   text-align: center;
    position: absolute;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
    width:87px;
}

.second-level-menu > li
{
    position: relative;
    height: 40px;
    background: #999999;
}
.second-level-menu > li:hover { background: #CCCCCC; }
/*level 1*/
.top-level-menu
{
    list-style: none;
    padding: 0;
    margin: 0;
}

.top-level-menu > li
{   
    position: relative;
    float: left;
    background: #999999;
}
.top-level-menu > li:hover { background: #CCCCCC; }

.top-level-menu li:hover > ul
{
    /* On hover, display the next level's menu */
    display:block;  
    top: left;

}


/* Menu Link Styles */

.top-level-menu a /* Apply to all links inside the multi-level menu */
{
    font: bold 14px Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    text-decoration: none;
    padding: 0 10px 0 10px;
    /* Make the link cover the entire list item-container */
    display: block;
    line-height: 40px;
}
.top-level-menu a:hover { color: #000000; }
</style>