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" ....