Drilldown navigation menu by Replacing Divs (Clumsy)

I made an attempt at a menu, that comprises of just replacing divs by showing and hiding. Kind of like a drilldown technique. I have the feeling that it is extremely long-winded, because i am a noob. Can anyone offer a cleaner or more beautiful technique. Am I missing the point?

Thanks

See fiddle

HTML

<divclass="first">Choose a Department</div><divclass="second"><tableclass="Menu"><tr><td><divclass="third">Technology</div></td><td><divclass="forth">Vehicles</div></td></tr></table></div><divclass="seventh"><tableclass="Menu"><tr><td><divclass="all"><a>Headphones</a>

</div></td><td><divclass="all"><a>Watches</a>

</div></td><td><divclass="nineth">Back</div></td></tr></table></div><divclass="sixth"><tableclass="Menu"><tr><td><a>Engine-Powered</a>

</td><td><a>Human-Powered</a>

</td><td><divclass="fifth">Back</div></td><td><divclass="eighth">Top</div></td></tr></table></div>
JS

$(document).ready(function(){ $('.first').show(); $('.second, .all, .seventh, .sixth').hide();
$('.first').click(function(){
$('.first, .second').hide();
$('.second').show();returnfalse;});});


$('.third').click(function(){
$('.second').hide();
$('.all, .seventh').show();returnfalse;});


$('.forth').click(function(){
$('.second').hide();
$('.sixth,.eighth').show();returnfalse;});


$('.fifth').click(function(){
$('.fifth, .sixth').hide();
$('.second').show();returnfalse;});


$('.nineth').click(function(){
$('.seventh, .nineth').hide();
$('.second').show();returnfalse;});

$('.eighth').click(function(){
$('.sixth, .fifth').hide();
$('.second').show();returnfalse;});
CSS

table {
text-align:center;
width:80%;
cursorointer;}
tr {
width:50%;
background:red;}

 

Okay, first of all, if you're gonna paste code, use the damn [ code ] -tags (there's even a little button in the editor, right next to the diskette).
That being said, that menu seems to be all sorts of wrong. First of, a menu won't EVER be a table. Redo it, take a look at the posts in this forum, and I'm sure you'll find plenty of working examples (with code, or at least links) so that you can get this to work properly. Also, if you're gonna be showing something, having a picture, or a link to a jsfiddle or something so we can understand how it's supposed to look is good.

 

Hi I apologise. I thought i was done correctly. I have had a look around, in fact what I wrote was an assemblage of other examples.


The effect I am looking for should follow this logic.




like this click through...