I have created a basic vertical menu that looks like this:
Home Information Info
I am wondering if it is possible to replace a list item with its own sublist when the item is active. Specifically, I want to change Home to Sub1 and Sub2 when the item is active in order to update the navigation to look like this:
Sub1 Sub2 | Information Info
Is there a way to achieve this using CSS?
Code Snippet
<ul class="nav">
<li><a href="#">Home</a></li>
<ul class="subnav">
<li><a href="#">Home Sub 1</a></li>
<li><a href="#">Home Sub 2</a></li>
</ul>
<li><a href="#">Informations</a></li>
<li><a href="#">Contact</a></li>
</ul>
CSS Styling
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;
}