CSS JSP - 下拉菜單在子菜單焦點上始終打開

Question

我想爲網站創建垂直菜單。它的工作原理相當不錯，但我仍然有下面的代碼有問題：

JSP：

<nav> 
    <ul> 
     <li><a href="#"> Saisie assistée (schémas prédéfinis) </a></li> 
     <li> <a href="#">Saisie libre </a></li> 
     <li> <a href="#">Extourne ou annulation écriture </a> 
      <ul "> 
       <li> <a href="#">Annulation écriture jour validé</a></li> 
       <li> <a href="#">Extourne écriture antérieure </a></li> 
      </ul> 
     </li> 
     <li> <a href="#">Consultations/Editions </a> 
      <ul > 
       <li> <a href="#">Lots à valider</a></li> 
       <li> <a href="#">Lots antérieurs comptabilisés </a></li> 
       <li> <a href="#">Listes des schémas habilités </a></li> 
       <li> <a href="#">Listes des comptes habilités </a></li> 
      </ul> 
     </li> 
     <li> <a href="#">Paramètrage/Administration </a> 
      <ul > 
       <li> <a href="#">Entités habilitées</a></li> 
       <li> <a href="#">Collaborateurs habilités </a></li> 
       <li> <a href="#">Habilitations Entité/Comptes </a></li> 
       <li> <a href="#">Habilitations Entité/Schémas </a></li> 
       <li> <a href="#">Paramétrages Schémas </a></li> 
       <li> <a href="#">Import et Export Excel </a></li> 
      </ul> 
     </li> 

    </ul> 
</nav> 

CSS：

nav { 
     width:300px; 
} 

nav ul { 
     list-style:none; 
     margin:0; 
     padding:0; 

} 

nav ul li { 

     position:relative; 
     background-color: #d23070; 
     border: 1px solid; 
     border-top-right-radius: 0.5em; 
     border-top-left-radius: 0.5em; 
     border-bottom-right-radius: 0.5em; 
     border-bottom-left-radius: 0.5em; 
     margin-bottom: 5px; 
} 

nav ul li:hover, 
nav ul li:FOCUS { 
     position:relative; 
     background-color: #3968ab; 
     border: 1px solid; 
     border-top-right-radius: 0.5em; 
     border-top-left-radius: 0.5em; 
     border-bottom-right-radius: 0.5em; 
     border-bottom-left-radius: 0.5em; 
     margin-bottom: 5px; 
} 

nav a { 
     color:#e8e8e8; 
     padding:12px 0px; 
     display:block; 
     text-decoration:none; 
     font-family:tahoma; 
     font-size:13px; 
     text-transform:uppercase; 
     padding-left:20px; 
} 

nav a:HOVER, 
nav a:FOCUS { 
     background-color:#3968ab; 
     color:#ffffff; 
     border-top-right-radius: 0.5em; 
     border-top-left-radius: 0.5em; 
     border-bottom-right-radius: 0.5em; 
     border-bottom-left-radius: 0.5em; 
} 

nav ul li ul{ 
     background-color:#3968ab; 
     color:blanc; 
     border: 1px solid; 
     border-top-right-radius: 0.5em; 
     border-top-left-radius: 0.5em; 
     border-bottom-right-radius: 0.5em; 
     border-bottom-left-radius: 0.5em; 
} 

nav a:focus ~ ul{ 
     display:block; 
     border: 1px solid; 
     border-top-left-radius: 0.5em; 
     border-bottom-right-radius: 0.5em; 
     border-bottom-left-radius: 0.5em; 
     background:#f1f1f1; 
     padding-top: 10px; 
} 

nav ul li ul:hover { 
     display:block; 
     border: 1px solid; 
     border-top-left-radius: 0.5em; 
     border-bottom-right-radius: 0.5em; 
     border-bottom-left-radius: 0.5em; 
     background:#f1f1f1; 
     padding-top: 10px; 
} 

nav ul ul { 
     position:relative; 
     left:0px; 
     top:0px; 
     border-top:1px solid #e9e9e9; 
     display:none; 
} 
nav ul ul li { 
     width:296px; 
     background:#f1f1f1; 
     border:0.5px solid #e9e9e9; 
     border-top:0; 
} 
nav ul ul li a { 
     color:#3968ab; 
     font-size:12px; 
     text-transform:none; 
} 
nav ul ul li a:hover { 
     color:#ffffff; 
} 

我想是打開點擊菜單和然後保持打開狀態，即使我們在子菜單的列表中選擇一個元素。現在，如果我選擇了菜單列表中的一個項目，它仍然是打開的，但是如果我點擊子菜單列表中的一個項目並將其移出鼠標，它就不會顯示。

這是我選擇子菜單「Extourneécritureantérieur」（焦點）項目時所要做的。

但是，當子菜單不懸停時，它自己關閉。 （所以我必須讓它保持打開狀態）。即使沒有懸停，我如何保持開放狀態？

編輯： 我堅持保持打開子菜單時選擇的項目，而不是鼠標懸停。這對我來說是真正的問題...

Answer 1

要做到這一點，我相信你會需要一些JavaScript。

首先，您將在CSS中創建一個可添加到子ul的樣式以保持其打開狀態。

ul.open { 
display: block; 
} 

然後使用一些jQuery的，你聽的一個項目點擊，當你發現一個點擊，你會發現李的內心UL和應用「開放」類的。

$(document).ready(function(){ 
    $("nav > ul > li a").click(function(){ 
     var parentLi = $(this).parent('li'); 
     var childUl = parentLi.children('ul'); 

     if (childUl.hasClass('open')) { 
      parentLi.childred('ul').removeClass('open'); 
     } else { 
      parentLi.childred('ul').addClass('open'); 
     } 

     return false; 

    }); 
}); 

Answer 2

你可以試試這個：

首先，你在nav

$(document).ready(function() { 
    var $nav = $('#top_navigation > ul > li'); 
    $nav.hover(
     function() { 
      $('ul', this).stop(true, true).slideDown('fast'); 
     }, 
     function() { 
      $('ul', this).slideUp('fast'); 
     } 
    ); 
}); 

DEMO HERE

這應該工作創建id="top_navigation" ....