使用Bootstrap的下拉菜單

我正在使用Bootstrap導航欄，我想獲得關於submenu的一些幫助，因爲我沒有克服以製作multi-level submenus。使用Bootstrap的下拉菜單

我有這樣的模式：

我想獲得Création Fiches Individuelles (sans n° unique)和Création Fiches Individuelles (avec n° unique)只是旁邊Création Fiches Individuelles。

換句話說，我想把最後一個框放在Création Fiches Individuelles旁邊，只需點擊這個子菜單即可顯示最後一個子菜單。然後我只是想顯示這最後一級，如果我不把鼠標放在Création Fiches Individuelles並非所有的時間。

這是關於部分在我的HTML文件：

<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"> <span class="glyphicon glyphicon-file"> 
              </span> Actes Etat Civil <b class="caret"></b></a> 
           <ul class="dropdown-menu"> 
            <li class="dropdown dropdown-submenu"> 
             <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
              <span class="glyphicon glyphicon-user"> 
              </span> Fiches Individuelles 
             </a> 
             <ul class="dropdown-menu sub-menu"> 
              <li><a href="{% url "home" %}">Accueil Fiches Individuelles</a></li> 

              <li class="dropdown dropdown-submenu"> 
               <li><a href="#"> Création Fiches Individuelles</a></li> 
               <ul class="dropdown-menu"> 
                <li><a href="{% url "form" %}">Création Fiches Individuelles (sans n° unique) </a></li> 
                <li><a href="{% url "form2" %}">Création Fiches Individuelles (à partir n° unique) </a></li> 
               </ul> 
              </li> 

              <li><a href="{% url "searched" %}">Consultation Fiches Individuelles</a></li> 
              {% if request.user|has_group:"admin" %} 
              <li><a href="{% url "edited" %}">Edition Fiches Individuelles</a></li> 
              <li><a href="{% url "deleted" %}">Suppression Fiches Individuelles</a></li> 
              {% endif %} 
             </ul> 
            </li> 
...

是否有可能得到一些幫助才能做到這一點？

謝謝！

來源

2017-04-10 Deadpool

在CSS中，這可能工作。

.dropdown-toggle .dropdown-menu .dropdown-menu .dropdown-menu{ 
    display:none; 
} 
.dropdown-toggle .dropdown-menu .dropdown-menu .dropdown > li > a:hover .dropdown-menu{ 
    display:block; 
    position: absolute; 
    left:100%; 
    top:0; 
}

但是這樣的嵌套類並不理想。在你的html中，我會添加分類到菜單的每個級別。 .LEVEL一 .LEVEL兩 .LEVEL三

等

來源

2017-04-10 08:44:46

CSS將使工作，但我想只顯示如果我把我的鼠標'創造銷售商Individuelles'最後一個級別。到目前爲止，這最後一級始終顯示，我不想^^ – Deadpool

我編輯了我的答案，包括顯示/隱藏懸停。 –

您的解決方案無法正常工作^^ – Deadpool

使用Bootstrap的下拉菜單

回答

相關問題