How to make the sub nav disappear while other sub nav show up while hover

[amaresh]

I setup this main nav: \[code\]<ul class="menu12"><li><a href="http://stackoverflow.com/">Home</a></li><li><a href="http://stackoverflow.com/">About</a> <ul> <li><a href="http://stackoverflow.com/">History</a></li> <li><a href="http://stackoverflow.com/">Team</a></li> <li><a href="http://stackoverflow.com/">Offices</a></li> </ul></li><li><a href="http://stackoverflow.com/">Services</a> <ul> <li><a href="http://stackoverflow.com/">Web Design</a></li> <li><a href="http://stackoverflow.com/">Internet</a></li> <li><a href="http://stackoverflow.com/">testing ></a> <ul> <li><a href="http://stackoverflow.com/">test 1</a></li> <li class="selected"><a href="http://stackoverflow.com/">test 2</a></li> <li><a href="http://stackoverflow.com/">test 3</a></li> <li><a href="http://stackoverflow.com/">testing ></a> <ul> <li><a href="http://stackoverflow.com/">test 1</a></li> <li><a href="http://stackoverflow.com/">test 2</a></li> <li><a href="http://stackoverflow.com/">test 3</a></li> <li><a href="http://stackoverflow.com/">test 4</a></li> <li><a href="http://stackoverflow.com/">test 5</a></li> </ul> </li> <li><a href="http://stackoverflow.com/">test 4</a></li> <li><a href="http://stackoverflow.com/">test 5</a></li> </ul> </li> <li><a href="http://stackoverflow.com/">Hosting</a></li> <li><a href="http://stackoverflow.com/">Domain Names</a></li> <li><a href="http://stackoverflow.com/">Broadband</a></li> </ul></li><li><a href="http://stackoverflow.com/">Contact Us</a> <ul> <li><a href="http://stackoverflow.com/">U K</a></li> <li><a href="http://stackoverflow.com/">France</a></li> <li><a href="http://stackoverflow.com/">USA</a></li> <li><a href="http://stackoverflow.com/">Australia</a></li> </ul></li> </ul>\[/code\]http://jsfiddle.net/williamdickson/GK8eS/So for that example is the landing page of item 'test 2'. When you hover any other main items like 'About', or 'contact us', their sub items are overlaying on top of the current items.What I want is when you hover on other 'non-selected' class items, their sub items show up and the current 'selected' item will be disappear. Like how it works on here: http://jsfiddle.net/williamdickson/2n4hR/Thank you