javascript - 当我将鼠标悬停在导航栏元素本身时，我的子导航栏可见，但当我将鼠标悬停在它上面时消失

问题描述

我做了一个子导航栏，当我将鼠标悬停在它上面时它消失了，我尝试改变一些东西但是当我将鼠标悬停在子菜单本身上时它仍然会消失。如果有人知道我能做什么，那将非常有帮助。

代码：

<header>
        <div class="containers">
        <nav>
            <ul>
                <li><a href="#">home</a></li>
                <li><a href="#">movies</a>
                       <ul class="sub-menu">  
                           <li><a href="MovieRecsPage.html" class="sub-menu-content-a">Recommended</a></li>
                           <li><a href="#" class="sub-menu-content-a">best rated movies</a></li>
                           <li><a href="#" class="sub-menu-content-a">Genre</a>
                               <ul class="dsub-menu">
                                   <li><a href="#" class="dsub-menu-content-a">Action</a></li>
                                   <li><a href="#" class="dsub-menu-content-a">adventure</a></li>
                                   <li><a href="#" class="dsub-menu-content-a">Comedy</a></li>
                                   <li><a href="#" class="dsub-menu-content-a">Sci-Fi</a></li>
                                   <li><a href="#" class="dsub-menu-content-a">Romance</a></li>
                                   <li><a href="#" class="dsub-menu-content-a">Animation</a></li>
                                   <li><a href="#" class="dsub-menu-content-a">Horror</a></li>
                                   <li><a href="#" class="dsub-menu-content-a">Fantasy</a></li>
                                   <li><a href="#" class="dsub-menu-content-a">Crime</a></li>
                                   <li><a href="#" class="dsub-menu-content-a">Drama</a></li>
                                   <li><a href="#" class="dsub-menu-content-a">Mystery</a></li>
                               </ul>
                           </li>
                       </ul>    
                </li>
                <li><a href="#">TV shows</a></li>
                <li><a href="#">watch list</a></li>
                <li><a href="#">Oscar</a></li>                    
                <li><a href="RegisterLogInPage.html"><small>Sign In</small></a></li>
            </ul>  
           </nav>
            
        </div> 
    </header>

CSS：

    containers{
    width: 80%;
    margin: 0 auto;
}

header{
    background-color: firebrick;
    height: 70px;
}

header::after{
    content: '';
    display: table;
    clear: both;
}

img{
    float: left;
    padding: 10px 80px;
    height: 50px; 
    width: 150px;
}

nav{
    float: right;
    padding: 10px 55px;
}

nav ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

nav ul li{
    display: inline-block;
    margin-left: 70px;
    padding-top: 23px;
    position: relative;
}

nav ul li a{
    color: black;
    text-decoration: none;
    text-transform: uppercase;
}

nav a:hover{
    color: #191919;
}

nav a::before{
    content: '';
    display: block;
    height: 5px;
    width: 100px;
    background-color: black;
    
    position: absolute;
    top: 0;
    width: 0%;
    
    transition: all ease-in-out 250ms;
}

nav a:hover::before{
    width: 100%;
}

.sub-menu{
    position: absolute;
    background-color: indianred;
    width: 200%;
    height: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    display: block;
    top: 60px;
    right: 0;
    left: -30px;
    overflow: hidden;
    display: none;
}

.sub-menu li {
    color: #eee;
    font-size: 12px;
    width: 100%;
    left: -65px;
    padding: 15px 0;
    
}

nav ul li:hover ul.sub-menu{
   display: block;
}

注意：我在这里应用的 CSS 代码不包含其他子菜单。感谢您的帮助

标签： javascripthtmlcss

javascript - 当我将鼠标悬停在导航栏元素本身时，我的子导航栏可见，但当我将鼠标悬停在它上面时消失

问题描述

解决方案

推荐阅读