Setting up the main navigation menu:
<ul class="menu12">
<li><a href="/">Home</a></li>
<li><a href="/">About</a>
<ul>
<li><a href="/">History</a></li>
<li><a href="/">Team</a></li>
<li><a href="/">Offices</a></li>
</ul>
</li>
<li><a href="/">Services</a>
<ul>
<li><a href="/">Web Design</a></li>
<li><a href="/">Internet</a></li>
<li><a href="/">testing ></a>
<ul>
<li><a href="/">test 1</a></li>
<li class="selected"><a href="/">test 2</a></li>
<li><a href="/">test 3</a></li>
<li><a href="/">testing ></a>
<ul>
<li><a href="/">test 1</a></li>
<li><a href="/">test 2</a></li>
<li><a href="/">test 3</a></li>
<li><a href="/">test 4</a></li>
<li><a href="/">test 5</a></li>
</ul>
</li>
<li><a href="/">test 4</a></li>
<li><a href="/">test 5</a></li>
</ul>
</li>
<li><a href="/">Hosting</a></li>
<li><a href="/">Domain Names</a></li>
<li><a href="/">Broadband</a></li>
</ul>
</li>
<li><a href="/">Contact Us</a>
<ul>
<li><a href="/">U K</a></li>
<li><a href="/">France</a></li>
<li><a href="/">USA</a></li>
<li><a href="/">Australia</a></li>
</ul>
</li>
</ul>
http://jsfiddle.net/williamdickson/GK8eS/
In this example, the landing page is item 'test 2'. When hovering over other main items such as 'About' or 'contact us', their sub-items overlay on top of the current items.
I want it so that when hovering over 'non-selected' items, their sub-items will display while the current 'selected' item disappears. Similar to how it functions here: http://jsfiddle.net/williamdickson/2n4hR/
Thank you