CODEWITHSUNDEEP
jquerycssmenu
Simpledog
Simpledog

Reputation: 51

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

I setup this main nav: 

<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 &gt;</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 &gt;</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/

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

Upvotes: 0

Views: 79

Answers (1)

kennypu
kennypu

Reputation: 6051

since you're already using jQuery, all you need to do is remove any occurrences of .selected in an .hover() event. change your jquery code to this for the first fiddle: 

$(document).ready(function() {
    $('li').hover(function() {
        $('li').removeClass('selected');
        $(this).parent('li').addClass('selected');
    });
    $('li.selected').parents('li').addClass("selected");
});
​

note, although this does what you want it to do, once you hover your mouse over something, it will remove the initial red high light of the currently selected page. I'd suggest using a different class for the change in text color.

Upvotes: 1

Related Questions