Replacing main menu item by submenu items via css? - html

Question

I've written a simple vertical menu like:
Home Information Info
I'd like to know if it's possible to replace a list element with it's own sublist when the item is active. I'm trying replace Home with Sub1 and Sub2 when the item is active in order to modify the navigation as follows:
Sub1 Sub2 | Information Info
Is there a way to achieve this via css?
Markup
<ul class="nav">
<li>Home</li>
<ul class="subnav">
<li>Home Sub 1</li>
<li>Home Sub 2</li>
</ul>
<li>Informations</li>
<li>Contact</li>
</ul>
CSS
ul.nav {
float:right;
}
ul.nav > li {
border:1px solid #333;
display:block;
float: left;
line-height:38px;
margin:0;
padding:0;
position:relative;
padding:20px
}
ul.subnav {
display:none;
}
Fiddle

Answer 1

First you need to put .subnav element inside a li element, like:
<ul class="nav">
<li class="with-subnav">Home
<ul class="subnav">
<li>Home Sub 1</li>
<li>Home Sub 2</li>
</ul>
</li>
<li>Informations</li>
<li>Contact</li>
</ul>
And in your CSS code:
ul.nav > li.with-subnav:hover > a{
display:none;
}
ul.nav li:hover ul.subnav{
display:block;
}
DEMO
Update:
Maybe you want the elements horizontally with this:
ul.subnav li{
float: left;
}
DEMO2
FINAL SOLUTION:
Solution that solved the problem finally, was to concatenate both classes (active and with-subnav). Check the DEMO here :)