php - Joomla 下拉菜单

Question

我在 joomla 中遇到下拉引导菜单问题。看起来一直在膨胀。我已经覆盖了一个 mod_menu，所以 < li > 有一个 class = "nav-item"我认为它可能是这个问题的原因。也许有人有类似的问题，并且知道如何解决这个问题。 enter image description here

只有当我聚焦“下拉菜单”时，红色元素才应该可见，但它们始终可见。

有一个菜单的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 和这是一个工作 fiddle :https://jsfiddle.net/69hev2g4/23/

基本上你需要一个 id 用于第二个 ul 并添加 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/