I'm new to DNN and recently I was asked to create a menu look like this website: www.sorted.org.nz/home

But I couldn't figure out a way to configure the NavMenu to achieve that tab effect. I saw in the DNN Skin Objects.pdf there are some token called 'SeparatorRightHTML', 'SeparatorLeftHTML', 'SeparatorLeftHTMLActive' etc. Are these right tokens that I need to use to create the effect? If is how can I configure them?

Could anyone please give me some code examples? It would be very appreciated if you can give me some help!

Thank you very much.

Check this http://dnnskinextensions.codeplex.com...

I added a simple Tab Menu example to my Menu demo skins.

 Hi Timo,

Thanks very much for the demo. It's really simple and easy to understand.

I had a look at your '2 menu Hor' skin as well and now I've got a question. Instead of having a sub menu showing all the time, I would like to approach the 2 horizontal menus in another way: when you hover your cursor on to one of the buttons on the main menu, the horizontal sub menu appears underneath the main menu; when you move your cursor away from that button, the sub menu hides. Is there a way to achieve that?

I tried something like:
#MainMenu ul ul { position:absolute; top:10px; left:-30px;}
#MainMenu ul ul li { display: inline-block; padding: 0 20px 0 10px;}

But the submenu is not positioned correctly. Although it is inlined correctly, it only appears underneath the button I pointed on. I would like the sub menu appear underneath the whole main menu no matter which button I'm hovering on. Like the image below:
 
Could you please tell me what exact class I should change in order to do something similar to the image above?

Thanks very much!