Question

我在导航栏中显示选项列表时遇到问题。我有这段代码，其中有一个带有下拉菜单的li，它显示了一个选项列表。问题是，当我将鼠标悬停在li元素上时，会显示选项列表，但是li的标题...

我有此代码：

       <ul class="nav navbar-nav navbar-right">
            <li><a href="#home" class="smoothScroll">HOME</a></li>
             <li class="cn-dropdown-item pr12">
              <a id="lei_drop">Leistungen</a>
              <ul class="dropdown dropping_off" id="ul_drop">
                                    <li><a href="webdesign.php">Webdesign & Entwicklung</a></li>
                                    <li><a href="corporate-design.php">Corporate Design</a></li>
                                    <li><a href="#">Online Marketing</a></li>
                                    <li><a href="#">Lieferdienst Webshop</a></li>
                                </ul>
            <li><a href="#" class="smoothScroll">PROJEKTE</a></li>
            <li><a href="#" class="smoothScroll">AGENTUR</a></li>
            <li><a href="#" class="smoothScroll">KONTAKT</a></li>
        </ul>

css代码：

      .dropping_off
    {
        display: none !important;
    }
    .dropping_on
    {
        display: block !important;
    }

js代码：

     function enter ()
     {    
 $("#ul_drop").removeClass("dropping_off");

  $("#ul_drop").addClass("dropping_on");
     }

     function out ()
     {


  $("#ul_drop").removeClass("dropping_on");

   $("#ul_drop").addClass("dropping_off");
    }


       $('#lei_drop').hover(enter, out);

结果是这样的：

PROJEKTE和Leistungen之间没有我想要的距离。我希望将鼠标悬停在Leistungen上时，下拉菜单会显示出来，但标题“ Leistungen”不会移动。我该怎么办？

我正在使用引导程序以及一些库和插件，例如animate.css

在导航栏中显示ul下拉菜单时出现问题

0 个答案: