Joomla下拉菜单

Question

我在joomla中的下拉引导菜单有问题。 看起来好像一直都没完没了。 我已经覆盖了mod_menu，所以<li>有一个类=“ nav-item”，我认为这可能是导致此问题的原因。 也许有人遇到类似的问题，并且知道如何解决这个问题。 在此处输入图片说明

仅当我关注“下拉菜单”时，红色元素才应该可见，但它们始终可见。

菜单中有一个html（对不起代码风格）

<nav class="navbar navbar-light navbar-expand-md" id="navbar" style="background-color:#282d32;">
<div class="container-fluid">
<a class="navbar-brand" href="#" id="logo" style="color:#ffffff;font-size:25px;font-weight:500;letter-spacing:0px;font-family:'Noto Sans', sans-serif;"><strong>#</strong></a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navcol-1">
<span class="sr-only">Toggle navigation</span>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navcol-1" style="font-family:'Noto Sans', sans-serif;">
<ul class="nav navbar-nav ml-auto" id="nav">
<li class="item-106 nav-item"><a href="#" class="nav-link">Main</a></li><li class="item-107 deeper parent nav-item"><a href="#" class="dropdown-toggle nav-link dropdown-toggle">Dropdown menu</a><ul class="nav navbar-nav ml-auto"><li class="item-108 nav-item"><a href="#" class="dropdown-item" style="color: red;">First</a>
</li><li class="item-115 nav-item"><a href="#" class="dropdown-item" style="color: red;">Second</a></li>
<li class="item-109 nav-item"><a href="#" class="dropdown-item" style="color: red;">Third</a></li>
<li class="item-110 nav-item"><a href="#" class="dropdown-item">Wywrotki</a></li>
</ul>
</li>
<li class="item-112 nav-item">
<a href="#" class="nav-link">xxx</a>
</li>
</ul>
</div>
</div>
</nav>

编辑：我忘了菜单中的第四个元素，不必为此担心。

我想在此页面上实现类似“悬停我”的功能：

https://www.w3schools.com/howto/howto_css_dropdown.asp

Answer 1

链接（W3School）中的示例仅使用CSS完成，但是html具有bootstrap类

因此，要使下拉列表正常工作，您需要bootstrap的.js ，这是一个有效的小提琴： https : //jsfiddle.net/69hev2g4/23/

基本上，您需要第二个ul的id ，并在之前的链接中添加data-target和dropdown-collapse ，并且类collapse以使其首先被隐藏，

<nav class="navbar navbar-light" id="navbar" style="background-color:#282d32;">
    <div class="container-fluid">
        <a class="navbar-brand" href="#" id="logo" style="color:#ffffff;font-size:25px;font-weight:500;letter-spacing:0px;font-family:'Noto Sans', sans-serif;"><strong>#</strong></a>
        <button class="navbar-toggler" data-toggle="collapse" data-target="#navcol-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="" id="navcol-1" style="font-family:'Noto Sans', sans-serif;">
            <ul class="nav navbar-nav " id="nav" >
                <li class="item-106 nav-item"><a href="#" class="nav-link">Main</a></li>
                <li class="item-107 deeper parent nav-item" style="width:284px;"><a href="#" data-toggle="collapse" data-target="#dropdown"  class="navbar-toggler dropdown-toggle nav-link">Dropdown menu</a>
                    <ul class="nav navbar-nav collapse"id="dropdown">
                        <li class="item-108 nav-item"><a href="#" class="dropdown-item" style="color: red;">First</a></li>
                        <li class="item-115 nav-item"><a href="#" class="dropdown-item" style="color: red;">Second</a></li>
                        <li class="item-109 nav-item"><a href="#" class="dropdown-item" style="color: red;">Third</a></li>
                        <li class="item-110 nav-item"><a href="#" class="dropdown-item">Wywrotki</a></li>
                    </ul>
                </li>
                <li class="item-112 nav-item">
                <a href="#" class="nav-link">xxx</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

您可以使用此工具查看代码中的差异： https : //www.diffchecker.com/