当我将鼠标悬停在下拉菜单上时，它不会停留

Question

正如标题所暗示的，我制作了这个下拉菜单，但我不知道是什么原因，当我将鼠标悬停在它上面或者我从具有悬停效果的父元素中移除鼠标时，下拉菜单消失了，我希望它保留以便用户可以选择。

.sub-menu{
    display: none;

  }

  .sub-menu ul li{
    margin: 15px;
    width: 120px;
    padding: 15px;
  }

  .navbar-header ul li:hover .sub-menu{
    display: block !important;
    position:absolute;
    background: white;
    margin-top: 15px;
    margin-left: -15px;
  }

  .sub-menu ul:hover {
    display: block !important;
  }

  .navbar-header ul li:hover .sub-menu ul{
    display: block;
    margin: 10px; 
    -o-transition:.3s ease;
    -ms-transition:.3s ease;
    -moz-transition:.3s ease;
    -webkit-transition:.3s ease;
    transition:.3s ease;
    outline: none;
  }

  .sub-menu ul li:hover {
    display: block;
    background: #f69220;
  }

  .sub-menu ul li a{
    color: black;
  }
  .navbar-header ul li:hover .sub-menu ul li{
    display: block !important;
    color: black ;
    width: 150px;
    padding: 5px;
    border-radius: 0;
    text-align: center;
  }

<div class="navbar-header" style="padding: 0; margin: 0; ">
    <ul class="navbar-ul">
    <li> <a routerLink="/home"><img src="" class="navbar-logo" alt=""></a>
    </li>
    <!-- logo -->
    <!-- <li><a routerLink="/home">Home</a></li> -->
    <!-- <li><a routerLink="/aboutus">About Us</a></li> -->
    <li>
        <a routerLink="#">About Us</a>
        <div class="sub-menu">
            <ul>
                <li>
                    <a href="#">Gallery</a>
                </li>
                <li>
                    <a href="#">Testimonials</a> 
                </li>
                <li>
                    <a href="#">Blogs</a>
                </li>
            </ul>
        </div>
    </li>
</div>

Answer 1

这是由于子菜单的 margin-top: 15px。在这 15 像素中，您远离父级 LI -> li:hover 未应用 -> 子菜单被隐藏。

将其更改为 padding，或将边距设置为第一个子菜单 li。以下是 padding-top: 15px 的解决方案。

.navbar-ul > li {background: red; position: relative;}

.sub-menu{
    display: none;

  }

  .sub-menu ul li{
    margin: 15px;
    width: 120px;
    padding: 15px;
  }

  .navbar-header ul li:hover .sub-menu{
    display: block !important;
    position:absolute;
    background: yellow;
    padding-top: 15px; /* padding-top instead of margin-top */
    margin-left: -15px;
  }

  .sub-menu ul:hover {
    display: block !important;
  }

  .navbar-header ul li:hover .sub-menu ul{
    display: block;
    margin: 10px; 
    -o-transition:.3s ease;
    -ms-transition:.3s ease;
    -moz-transition:.3s ease;
    -webkit-transition:.3s ease;
    transition:.3s ease;
    outline: none;
  }

  .sub-menu ul li:hover {
    display: block;
    background: #f69220;
  }

  .sub-menu ul li a{
    color: black;
  }
  .navbar-header ul li:hover .sub-menu ul li{
    display: block !important;
    color: black ;
    width: 150px;
    padding: 5px;
    border-radius: 0;
    text-align: center;
  }

<div class="navbar-header" style="padding: 0; margin: 0; ">
    <ul class="navbar-ul">
    <li> <a routerLink="/home"><img src="" class="navbar-logo" alt=""></a>
    </li>
    <!-- logo -->
    <!-- <li><a routerLink="/home">Home</a></li> -->
    <!-- <li><a routerLink="/aboutus">About Us</a></li> -->
    <li>
        <a routerLink="#">About Us</a>
        <div class="sub-menu">
            <ul>
                <li>
                    <a href="#">Gallery</a>
                </li>
                <li>
                    <a href="#">Testimonials</a> 
                </li>
                <li>
                    <a href="#">Blogs</a>
                </li>
            </ul>
        </div>
    </li>
</div>