keeping 2nd level navigation on first level li:hover visible - css

Question

We have horizontal 1st level and 2nd level navigations. When a 1st level li is hovered over, a second level ul is displayed horizontally above the first level ul.
How do we make the second level ul remain visible when the mouse leaves the first level li? Is this possible with CSS only..??
Here's the CSS:
ul.ebene1{display:inline;}
ul.ebene1 li{display:inline; list-style-type:none; margin-right:2%;}
ul.ebene2{display:none;}
ul.ebene1 li:hover ul.ebene2{display:block; position:fixed; bottom:6%; width:80%; font-size:0.9em;}
And the HTML:
<ul class="ebene1">
<li>NAV1
<ul class="ebene2">
<li>Nav2</li>
<li>Nav2</li>
</ul>
</li>
<li>NAV1</li>
<li>NAV1
<ul class="ebene2">
<li>Nav2</li>
<li>Nav2</li>
</ul>
</li>
<li>NAV1</li>
</ul>

Answer 1

You can't do that with only CSS. The :hover pseudo classes is triggered when you hover the element. So when leaving the element stops the hover effect.
You could use JQuery to show the submenu.
[EDIT]
A Jquery solution would be this:
HTML
<ul class="ebene1">
<li>NAV1
<ul class="ebene2">
<li>Nav1.1</li>
<li>Nav1.2</li>
</ul>
</li>
<li>NAV2</li>
<li>NAV3
<ul class="ebene2">
<li>Nav3.1</li>
<li>Nav3.2</li>
</ul>
</li>
<li>NAV4</li>
</ul>
CSS
ul.ebene1 {
display:inline;
}
ul.ebene1 li {
display:inline;
list-style-type:none;
margin-right:2%;
}
.ebene2 {
display:none;
position:fixed;
bottom:6%;
width:80%;
font-size:0.9em;
}
JQuery
(".ebene1 li").mouseover( function() {
if( $(this).children('ul').length > 0 ) // check if a ul exists in the li
{
$('.ebene2').hide(); // hide all submenus
$(this).find('ul').show(); // show this submenu
}
});
And a DEMO.