HTML 下拉菜单在本应隐藏后仍会弹出

Question

我正在构建一个在下拉菜单中包含类别的网站，当导航栏中的“类别”部分悬停时，它们会显示过渡并逐渐消失。我发现的问题是，即使在我在 CSS 中添加的 0.25s 转换之后，菜单仍然存在。

因此，例如，我将鼠标悬停在“类别”部分，我的下拉菜单完全按照我想要的方式出现，并有 0.25 秒的过渡，然后我将鼠标悬停在下拉菜单之外，它会以相同的过渡消失。但即使它已经不可见，如果我将光标放回下拉菜单生成的区域，可以说在 1 到 2 秒内（下拉菜单已经消失并完全隐藏）它会再次弹出。这种行为可以在 JS fiddle 中看到，设计很糟糕，只是为了尽可能保持 HTML 和 CSS 只是为了说明问题

我研究了过渡时间，但无法弄清楚是什么导致了这种行为

Fiddle: https://jsfiddle.net/samig12/Lbfkxr45/1/

视频：https://imgur.com/a/lkkSREp

HTML:

<html>
<link rel="stylesheet" href="../../../style.css">
<script src="../../../script.js"></script>
<head>
    <title>Cyber-Electronics</title>
    <link rel="icon" type="image/x-icon" href="../../../images/cyber.png">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
</head>
<body>
    <header>
        <nav>
            <div class="navbar">
                
              

                      <a href="../../../index.html">
                        <img src="../../../images/logo.svg" height="60" width="60" alt="cyber electronics logo" class="cyberLogo">
                    </a>    

                </div>

                <ul class="nav-ul">  
                    <li>
                        <a href="../../../index.html">Home</a>
                    </li>
                    <li class="dropCategories">
                        <a href="../../categories.html">Categories</a>
                        <div class="dropdown-content">
                            <div class="dropdown-header">
                                <p>Select your desired category</p>
                            </div>
                            <div class="row">
                                <div class="column">
                                    <a href="../../hardware/hardware.html">Hardware</a>
                                    <a href="../../../404/404.html">Software</a>
                                    <a href="../../../404/404.html">Smart Devices</a>
                                </div>
                                <div class="column">
                                    <a href="../../../404/404.html">Smart Home</a>
                                    <a href="../../../404/404.html">Photo Audio Video</a>
                                    <a href="../../../404/404.html">TV's</a>
                                </div>
                                <div class="column">
                                    <a href="../../../404/404.html">Home Electronics</a>
                                    <a href="../../../404/404.html">Print & Office</a>
                                    <a href="../../../404/404.html">Gaming Zone</a>
                                </div>
                            </div>
                            
                        </div>
                    </li>
                    <li>
                        <a href="../../../404/404.html">Report</a>
                    </li>
                    <li>
                        <a href="../../../404/404.html">FAQ</a>
                    </li>
                </ul>

                <a href="../../../404/404.html" target="_blank" class="nav-login-register">
                    Login / Register
                </a>
            </div>
        </nav>

        <!----------------------------------------------  Product  ------------------------------------------------------------------->

       
        
        <footer class="footer">
            <div class="footerContainer">
                <div class="footerContent">
                    <div class="footerLogo">
                        <img src="../../../images/inkscapecyber.png" alt="logo" height="45" width="140">
                    </div>
                    <p class="copyright">Cyber Electronics LLC. All Rights Reserved. 2021</p>
                    <div class="footerSocials">
                        <a target="_blank" href="https://www.instagram.com">
                            <img class="icons" src="../../../images/ig.png" alt="instagram" height="24" width="24">
                        </a>
                        <a target="_blank" href="https://www.twitter.com">
                            <img class="icons" src="../../../images/tw.png" alt="twitter" height="24" width="24">
                        </a>
                    </div>
                </div>
            </div>
        </footer>

    </header>
    
    
    
    <script src="" async defer></script>
</body>

CSS:

    .dropCategories
{
    z-index: 1;
}

.dropCategories:hover .dropdown-content
{
    visibility: visible;
    opacity: 1;
    transition: visibility 0.25s, opacity 0.25s linear;
}
.dropdown-content 
{
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.15s, opacity 0.15s linear;
    position: absolute;
    width: 100%;
    left: 0;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 10;
}

.dropdown-content .dropdown-header 
{
    background: rgb(42, 48, 71);
    padding: 16px;
    color: white;
    font-size: 2em;
}
.column 
{
    float: left;
    width: 33.33%; /* change to 33.33% if 3 more sub-categories should be added*/
    padding: 10px;
    background-color: rgb(42, 48, 71);
    height: 400px;
}

.column a 
{
    -webkit-transition: 0.8s linear;
    transition: 0.8s linear; 
    float: none;
    color: rgb(226, 223, 238);
    padding: 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.column a:hover 
{
    -webkit-transition: 0.8s linear;
    transition: 0.8s linear; 
    background-color: rgb(30, 34, 51);
    color: #f75c6f;
}

.row:after 
{
    content: "";
    display: table;
    clear: both;
}
.nav-ul
{
    height: 8rem;
    list-style: none;
    display: inline-block;
    font-size: 1.6rem;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
}

nav ul li
{
    padding: 0 3rem;
    line-height: 8rem;
    transition: background-color;
    display: inline-block;
    text-align: center;
}

nav ul li:hover
{
    -webkit-transition: 0.5s linear;
    transition: 0.5s linear; 
    background-color: rgba(0,0,0,.075);
    color: #f75c6f;
}

.nav-right ul li
{
    border-right: 1px solid rgba(0,0,0,.075);
}

.nav-right ul li:nth-child(1)
{
    border-left: 1px solid rgba(0,0,0,.075);
}

.nav-right ul li:last-child
{
    border-right: none;
}

.nav-right i
{
    margin-right: 1rem;
}

.nav-right i:first-child
{
    margin-right: 0;
}

.nav-logo 
{
    float: left;
    padding: 10px 8px 8px 35px;
}

.nav-login-register
{
    float: right;
    text-decoration: none;
    display: block;
    margin: 22px 35px 8px 8px;
    font-size: 1.6rem;
    position: relative;
    padding: 15px;
    background-color: rgb(43, 54, 77);
    border-radius: 8px;
    -webkit-transition: 0.8s linear;
    transition: 0.8s linear; 
}

.nav-login-register:hover {
    -webkit-transition: 0.8s linear;
    transition: 0.8s linear; 
    background: #26d982;
    box-shadow: 0 0 20px #26d982;
}

.navbar
{
    justify-content: center;
    align-items: center;
    text-align: center;
}

.animation-div
{
    display: block;
    align-items: center;
    justify-content: center;
    text-align: center;
}

Answer 1

由于使用不透明度和可见性内容在 html.that 上是不可见的，这就是为什么会出现悬停问题。

.dropCategories
{
    z-index: 1;
}

.dropCategories:hover .dropdown-content /*this is the class that is causing me trouble*/
{
     height:100%;
    transition: height 0.25s;
}
.dropdown-content 
{
    /* visibility: hidden;
    opacity: 0; */
    height:0px;
    transition: height 0.15s;
    position: absolute;
    width: 100%;
    overflow:hidden;
    left: 0;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 10;
}

.dropdown-content .dropdown-header 
{
    background: rgb(42, 48, 71);
    padding: 16px;
    color: white;
    font-size: 2em;
}
.column 
{
    float: left;
    width: 33.33%; /* change to 33.33% if 3 more sub-categories should be added*/
    padding: 10px;
    background-color: rgb(42, 48, 71);
    
}

.column a 
{
    -webkit-transition: 0.8s linear;
    transition: 0.8s linear; 
    float: none;
    color: rgb(226, 223, 238);
    padding: 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.column a:hover 
{
    -webkit-transition: 0.8s linear;
    transition: 0.8s linear; 
    background-color: rgb(30, 34, 51);
    color: #f75c6f;
}

.row:after 
{
    content: "";
    display: table;
    clear: both;
}
.nav-ul
{
    height: 8rem;
    list-style: none;
    display: inline-block;
    font-size: 1.6rem;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
}

nav ul li
{
    padding: 0 3rem;
    line-height: 8rem;
    transition: background-color;
    display: inline-block;
    text-align: center;
}

nav ul li:hover
{
    -webkit-transition: 0.5s linear;
    transition: 0.5s linear; 
    background-color: rgba(0,0,0,.075);
    color: #f75c6f;
}

.nav-right ul li
{
    border-right: 1px solid rgba(0,0,0,.075);
}

.nav-right ul li:nth-child(1)
{
    border-left: 1px solid rgba(0,0,0,.075);
}

.nav-right ul li:last-child
{
    border-right: none;
}

.nav-right i
{
    margin-right: 1rem;
}

.nav-right i:first-child
{
    margin-right: 0;
}

.nav-logo 
{
    float: left;
    padding: 10px 8px 8px 35px;
}

.nav-login-register
{
    float: right;
    text-decoration: none;
    display: block;
    margin: 22px 35px 8px 8px;
    font-size: 1.6rem;
    position: relative;
    padding: 15px;
    background-color: rgb(43, 54, 77);
    border-radius: 8px;
    -webkit-transition: 0.8s linear;
    transition: 0.8s linear; 
}

.nav-login-register:hover {
    -webkit-transition: 0.8s linear;
    transition: 0.8s linear;
    background: #26d982;
    box-shadow: 0 0 20px #26d982;
}

.navbar
{
    justify-content: center;
    align-items: center;
    text-align: center;
}

.animation-div
{
    display: block;
    align-items: center;
    justify-content: center;
    text-align: center;
}

<html>
    <link rel="stylesheet" href="../../../style.css">
    <script src="../../../script.js"></script>
    <head>
        <title>Cyber-Electronics</title>
        <link rel="icon" type="image/x-icon" href="../../../images/cyber.png">
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
    </head>
    <body>
        <header>
            <nav>
                <div class="navbar">
                    
                  

                          <a href="../../../index.html">
                            <img src="../../../images/logo.svg" height="60" width="60" alt="cyber electronics logo" class="cyberLogo">
                        </a>    

                    </div>

                    <ul class="nav-ul">  
                        <li>
                            <a href="../../../index.html">Home</a>
                        </li>
                        <li class="dropCategories">
                            <a href="../../categories.html">Categories</a>
                            <div class="dropdown-content">
                                <div class="dropdown-header">
                                    <p>Select your desired category</p>
                                </div>
                                <div class="row">
                                    <div class="column">
                                        <a href="../../hardware/hardware.html">Hardware</a>
                                        <a href="../../../404/404.html">Software</a>
                                        <a href="../../../404/404.html">Smart Devices</a>
                                    </div>
                                    <div class="column">
                                        <a href="../../../404/404.html">Smart Home</a>
                                        <a href="../../../404/404.html">Photo Audio Video</a>
                                        <a href="../../../404/404.html">TV's</a>
                                    </div>
                                    <div class="column">
                                        <a href="../../../404/404.html">Home Electronics</a>
                                        <a href="../../../404/404.html">Print & Office</a>
                                        <a href="../../../404/404.html">Gaming Zone</a>
                                    </div>
                                </div>
                                
                            </div>
                        </li>
                        <li>
                            <a href="../../../404/404.html">Report</a>
                        </li>
                        <li>
                            <a href="../../../404/404.html">FAQ</a>
                        </li>
                    </ul>

                    <a href="../../../404/404.html" target="_blank" class="nav-login-register">
                        Login / Register
                    </a>
                </div>
            </nav>

            <!----------------------------------------------  Product  ------------------------------------------------------------------->

           
            
            <footer class="footer">
                <div class="footerContainer">
                    <div class="footerContent">
                        <div class="footerLogo">
                            <img src="../../../images/inkscapecyber.png" alt="logo" height="45" width="140">
                        </div>
                        <p class="copyright">Cyber Electronics LLC. All Rights Reserved. 2021</p>
                        <div class="footerSocials">
                            <a target="_blank" href="https://www.instagram.com">
                                <img class="icons" src="../../../images/ig.png" alt="instagram" height="24" width="24">
                            </a>
                            <a target="_blank" href="https://www.twitter.com">
                                <img class="icons" src="../../../images/tw.png" alt="twitter" height="24" width="24">
                            </a>
                        </div>
                    </div>
                </div>
            </footer>

        </header>
        
        
        
        <script src="" async defer></script>
    </body>
</html>

HTML 下拉菜单在本应隐藏后仍会弹出

HTML dropdown menu pops up even after it should've already been hidden

html

css

css-transitions