Here the simple explanations with demo.
STEP 1:
<nav>
<li><a href="#">1.0.0</a></li>
<li><a href="#">2.0.0</a>
<ul class='children'>
<li><a href="#">2.1.0</a>
<ul class='children'>
<li><a href="#">2.1.1</a></li>
<li><a href="#">2.1.2</a></li>
</ul>
</li>
<li><a href="#">2.2.0</a>
<ul class='children'>
<li><a href="#">2.2.1</a></li>
<li><a href="#">2.2.2</a></li>
<li><a href="#">2.2.3</a></li>
<li><a href="#">2.2.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">3.0.0</a></li>
<li><a href="#">4.0.0</a></li>
<li><a href="#">5.0.0</a></li>
</nav>
STEP 2:
$("nav li").find("ul").hide().end().find("a")
// hide all other ul's in the nav
.click(function(e) {
$(this).parent().siblings().find('ul').fadeOut('fast');
$(this).parent().children('ul').delay(200).fadeToggle('fast');
});
</script>
STEP 3:
<style>
body {
font-size: 12px;
line-height: 16px;
font-family: "Helvetica Neue", Arial, sans-serif;
color: #575757;
}
a, a:active, a:visited {
color:#575757;
text-decoration:none;
}
a:hover {
color:#888888;
}
nav {
font-size: 14px;
text-transform:uppercase;
position:relative;
}
.children {
width:146px;
top:0;
position:absolute;
margin-left: 160px;
}
.selected { color:blue; }
</style>
Demo url : http://fiddle.jshell.net/866UZ/show/
Thanks to fiddle , its learn and run from that site and thanks to jquery :)
STEP 1:
<nav>
<li><a href="#">1.0.0</a></li>
<li><a href="#">2.0.0</a>
<ul class='children'>
<li><a href="#">2.1.0</a>
<ul class='children'>
<li><a href="#">2.1.1</a></li>
<li><a href="#">2.1.2</a></li>
</ul>
</li>
<li><a href="#">2.2.0</a>
<ul class='children'>
<li><a href="#">2.2.1</a></li>
<li><a href="#">2.2.2</a></li>
<li><a href="#">2.2.3</a></li>
<li><a href="#">2.2.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">3.0.0</a></li>
<li><a href="#">4.0.0</a></li>
<li><a href="#">5.0.0</a></li>
</nav>
STEP 2:
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.2.js'></script><script>
$("nav li").find("ul").hide().end().find("a")
// hide all other ul's in the nav
.click(function(e) {
$(this).parent().siblings().find('ul').fadeOut('fast');
$(this).parent().children('ul').delay(200).fadeToggle('fast');
});
</script>
STEP 3:
<style>
body {
font-size: 12px;
line-height: 16px;
font-family: "Helvetica Neue", Arial, sans-serif;
color: #575757;
}
a, a:active, a:visited {
color:#575757;
text-decoration:none;
}
a:hover {
color:#888888;
}
nav {
font-size: 14px;
text-transform:uppercase;
position:relative;
}
.children {
width:146px;
top:0;
position:absolute;
margin-left: 160px;
}
.selected { color:blue; }
</style>
Demo url : http://fiddle.jshell.net/866UZ/show/
Thanks to fiddle , its learn and run from that site and thanks to jquery :)
