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/