Navigation

Simple nested navigation.

by ChangJoo Park

HTML

<nav id="navigation">
    <ul>
        <li class="mainmenu">
            <a href="#">Menu 1</a>
            <ul class="submenu">
                <li>SubMenu 1</li>
                <li>SubMenu 2</li>
                <li>SubMenu 3</li>
            </ul>
        </li>
        <li class="mainmenu">
            <a href="#">Menu 2</a>
            <ul class="submenu">
                <li>SubMenu 1</li>
                <li>SubMenu 2</li>
            </ul>
        </li>
        <li class="mainmenu">
            <a href="#">Menu 3</a>
            <ul class="submenu">
                <li>SubMenu 1</li>
                <li>SubMenu 2</li>
                <li>SubMenu 3</li>
            </ul>
        </li>
    </ul>
</nav>

CSS

#navigation ul{
    list-style: none;
}
#navigation .mainmenu {
    display: inline;
}

.red{
    background-color: red;
}

JavaScript

(function(){
    $(".mainmenu")
    .mouseover(function(){
        $(this).find(".submenu").addClass('red');
    })
    .mouseout(function(){
        $(this).find(".submenu").removeClass('red');
    });
})();