CSS JSP - Dropdown menu keeps opening on submenu focus - html

Question

I would like to create a vertical menu for a website. It works quite well but I still have a problem with the following code:
JSP:
<nav>
<ul>
<li> Saisie assistée (schémas prédéfinis) </li>
<li> Saisie libre </li>
<li> Extourne ou annulation écriture
<ul ">
<li> Annulation écriture jour validé</li>
<li> Extourne écriture antérieure </li>
</ul>
</li>
<li> Consultations/Editions
<ul >
<li> Lots à valider</li>
<li> Lots antérieurs comptabilisés </li>
<li> Listes des schémas habilités </li>
<li> Listes des comptes habilités </li>
</ul>
</li>
<li> Paramètrage/Administration
<ul >
<li> Entités habilitées</li>
<li> Collaborateurs habilités </li>
<li> Habilitations Entité / Comptes </li>
<li> Habilitations Entité / Schémas </li>
<li> Paramétrages Schémas </li>
<li> Import et Export Excel </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;
}
What I want is to open the menu on click and then keep it open, even if we select an element on the list of the subMenu. For now, it remains open if I select an item of the menu's list, but it doesn't if I click on an item of the submenu's list and move my mouse out of it.
This is what I whant when the item of the submenu "Extourne écriture antérieur" is selected(focus).
But When the submenu isn't hover, it is closing by itself. (So I have to keep my mouse on it to keep it open). How can I keep it open even if it is not hovered?
EDIT:
I insist for keeping open the submenu with the item selected when it is not hover by mouse. This is the real problem for me...

Answer 1

To do this, I believe you would need some javascript.
First you would create a style in your CSS that could be added to a child ul to keep it open.
ul.open {
display: block;
}
Then using some jQuery, you listen for a click on an item, and when you detect a click, you find the LI's inner UL and apply the 'open' class to it.
$(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

you can try this one:
First You Create id="top_navigation" in 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
This Should work....