Css 如何在使用鼠标悬停事件显示后保持下拉列表显示？

我有一个标题，由指向其他网站的导航链接组成，其中一些链接通过下拉菜单显示。 通过事件悬停，我添加了一个动画和样式，以查看您每时每刻都在播放什么，如果是下拉列表，则会显示所有选项。 问题是，我不知道如何保持下拉菜单的显示来选择任何链接，如果出现@mouseleave，它就会消失。 我曾尝试将@mouseleave事件带到下拉列表中，但它不起作用。 如果有人能让我明白我的错误。 提前感谢您的时间和帮助。 我给你留了一个链接，上面有一个我现在正在使用的示例

这是我的模板

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>
<div id="row">
        <div class="col-xs-12">
            <header>
                <nav class="navbar navbar-expand-lg navbar-light header">
                 
                  
                  <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav menu">
                      
                      <li class="nav-item">
                        <a class="nav-link">PERSONAL INFO</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link menu-link-toggle" @mouseover="animalList = true" @mouseleave="animalList = false" >PERSONAL FORM</a>
                        <ul class='dropdown-menu' v-if="animalList">
                          <li class='dropdown-menu-item'>
                            <a class='dropdown-menu-link'>DATA</a>
                          </li>
                          <li class='dropdown-menu-item'>
                            <a class='dropdown-menu-link'>FORM DATA</a>
                          </li>
                          <li class='dropdown-menu-item'>
                            <a class='dropdown-menu-link' >AUTOCOMPLETE</a>
                          </li>
                        </ul>
                      </li>
                      <li class="nav-item">
                        <a class='menu-link menu-link-toggle' @mouseover="serviceList = true" @mouseleave="serviceList = false">SERVICES</a>
                        <ul class='dropdown-menu' v-if="serviceList">
                          <li class='dropdown-menu-item'>
                            <a class='dropdown-menu-link' >LA CRÉMATION PRIVÉE</a>
                          </li>
                          <li class='dropdown-menu-item'>
                            <a class='dropdown-menu-link' href="https://www.esthima.fr/incineration-reference">PERSONAL S</a>
                          </li>
                          <li class='dropdown-menu-item'>
                            <a class='dropdown-menu-link'>COMPANY S</a>
                          </li>
                          <li class='dropdown-menu-item'>
                            <a class='dropdown-menu-link' >FULL S INFO</a>
                          </li>
                        </ul>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link ">SHOP</a>
                      </li>
                      <li class="nav-item active">
                        <router-link class="nav-link" to="/devis">TARIFS ET DEVIS </router-link>
                      </li>
                      <li class="nav-item">
                        <a class='menu-link menu-link-toggle' @mouseover="contactList = true" @mouseleave="contactList = false">CONTACT</a>
                        <ul class='dropdown-menu' v-if="contactList">
                          <li class='dropdown-menu-item'>
                            <a class='dropdown-menu-link'>MAIL</a>
                          </li>
                          <li class='dropdown-menu-item'>
                            <a class='dropdown-menu-link' >PHONE</a>
                          </li>
                        </ul>
                      </li> 
                    </ul>
                  </div>
              </nav>
            </header>
        </div>
    </div>

---

将mouseover和mouseleave事件放在包含链接和下拉列表的

元素上

<li class="nav-item" @mouseover="animalList = true" @mouseleave="animalList = false">
  <a class="nav-link menu-link-toggle">PERSONAL FORM</a>
  <ul class='dropdown-menu' v-if="animalList">
    <li class='dropdown-menu-item'>

      <a class='dropdown-menu-link'>DATA</a>
    </li>
    <li class='dropdown-menu-item'>
      <a class='dropdown-menu-link'>FORM DATA</a>
    </li>
    <li class='dropdown-menu-item'>
      <a class='dropdown-menu-link' >AUTOCOMPLETE</a>
    </li>
  </ul>
</li>

个人形式


资料


表单数据


自动完成

<li class="nav-item" @mouseover="animalList = true" @mouseleave="animalList = false">
  <a class="nav-link menu-link-toggle">PERSONAL FORM</a>
  <ul class='dropdown-menu' v-if="animalList">
    <li class='dropdown-menu-item'>

      <a class='dropdown-menu-link'>DATA</a>
    </li>
    <li class='dropdown-menu-item'>
      <a class='dropdown-menu-link'>FORM DATA</a>
    </li>
    <li class='dropdown-menu-item'>
      <a class='dropdown-menu-link' >AUTOCOMPLETE</a>
    </li>
  </ul>
</li>