Menu stays open on click - css

Question

I have a menu with drop down statement on hover the problem is that when i remove the mouse it hides again, can someone help me keep the sub menu open when i click the option on the main menu?
It show´s when mouse hover but i need it to stay open even after i remove the mouse cursor.
thanks
#cssmenu > ul {
position: relative;
z-index: 999;
float: left;
border-bottom:2px solid lightblue;
}
#cssmenu > ul li {
float: left;
min-height: 0px;
line-height: 1.3em;
vertical-align: middle;
padding: 0px;
}
#cssmenu > ul li.hover,
#cssmenu > ul li:hover {
z-index: 599;
cursor: default;
}
#cssmenu > ul ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
}
#cssmenu > ul ul li {
float: none;
}
#cssmenu > ul li:hover > ul {
visibility: visible;
border-bottom:2px solid lightblue;
color: white;
}
#cssmenu {
width: auto;
background: black;
font-size: 13px;
color:white;
top:0px;
}
#cssmenu > ul {
padding: 0 1px;
display: block;
float: none;
zoom: 1;
}
#cssmenu > ul:before {
content: '';
display: block;
}
#cssmenu > ul:after {
content: '';
display: table;
clear: both;
}
#cssmenu ul ul {
margin: 0 10px;
padding: 0 10px;
float: none;
background: black;
border-bottom:2px solid lightblue;
border-left: 1px solid lightblue;
border-right: 1px solid lightblue;
border-top: none;
right: 0;
left: 0;
visibility: hidden;
<div id='cssmenu' style="opacity: 0.5;filter: alpha(opacity=50);align-top:0px;color:white;">
<ul>
<li class='activeM'><a class="inicio" href='#'><span>Home</span></a></li>
<li class='activeM'><a class="competencias" href='#'><span>Competências</span></a>
<ul>
<li class='active'><a class="saude" href='#'><span>Saúde</span></a></li>
<li class='active'><a class="ecosocial" href='#'><span>Economia Social</span></a></li>
<li class='active'><a class="desnvsustent" href='#'><span>Desenvolvimento Sustentado</span></a></li>
</ul>
</li>
</div>
thanks in advance.

Answer 1

The most recent comment seems to make this more clear that you're looking for a visual fading effect. You're right. A transition would be a good way to go.
You'll need to use opacity as well as visibility. I mocked up an example here: http://jsbin.com/cesacu/1/edit?html,css,output
You may want to play with the transition timing function or duration to get the effect you're looking for.

Answer 2

Edit: Thanks for the demo. It seems to have appropriate behavior at larger screen sizes, when the menu is all on one level. You're right that there's a problem when the menu goes to two levels on smaller screens.Is that the situation where you're experiencing the real problem?
I found this CodePen that shows one way to make a responsive two-level menu like this. If you need a pure-CSS menu, try searching for "responsive pure css mega menu". There look to be some other options there.
Initial answer:
I do think you'll need Javascript as Hakim said. One option would be to add classes that replace your :hover pseudo classes, then use a jQuery call to add those classes to the menu.
This example from a 2009 CSS Tricks post, tweaked for your case:
$('#cssmenu > ul li:hover > ul').hover(
function(){
$(this).children().addClass('visible');
}
)
It looks like you'll also need to add a class directly on $(this) for the #cssmenu > ul li.hover selector. You would then need another command, such as $(your-selector).click(function(){ $(this).removeClass('visible')) to make it go away again.
On a more general note, it does seem a little odd to want a sub-menu to stay open even when you leave it. Unless there's a third level menu, that is.