Question

I’m putting together a horizontal dropdown menu. Each button changes on rollover using a single PNG css sprite (using background-position: -x -y).

I have my dropdown working fine with hoverIntent.js, but I don’t know how to keep highlighted the menu item corresponding to the sub-menu I’m hovering.

CSS

#navigation-main {
    background: url(../images/navigation-main.png) repeat-x;
    height: 54px;
}

#navigation-main ul {
    width: 960px;
    margin: 0 auto;
    height: 54px;
    list-style: none;

}

#navigation-main ul li {

    display: inline;
    position: relative;

}

#navigation-main ul div {

    display: none;

}

#navigation-main ul li div {

    border-right-style: solid;

    border-left-style: solid;

    border-bottom-style: solid;

    border-color: #2386D8;

    border-right-width: 1px;
    border-left-width: 1px;
    border-bottom-width: 1px;

    position: absolute;
    padding: 10px;
    margin: 0 0 0 1px;

    width: 300px;
    top: 54px;
    background: #113E5F;

}

#navigation-main ul li.hovering div {
    display: block;
}


#navigation-main ul li a {

    display: block;
    float: left;
    height: 54px;
    background: url(../images/navigation-sprite.png);
    text-indent: -9999px;
}


#navigation-main  ul li a.nav-home {
    width: 50px; background-position: 0px 0px;
}

#navigation-main  ul li a.nav-documents {
    width: 151px; background-position: -50px 0px;
}

#navigation-main  ul li a.nav-tools {
    width: 151px; background-position: -201px 0px;
}

#navigation-main  ul li a.nav-units {
    width: 151px; background-position: -352px 0px;
}

#navigation-main  ul li a.nav-social {
    width: 151px; background-position: -503px 0px;
}

#navigation-main  ul li a.nav-people {
    width: 151px; background-position: -654px 0px;
}

#navigation-main  ul li a.nav-learning {
    width: 153px; background-position: -805px 0px;
}

#navigation-main  ul li a.nav-home:hover {
    width: 50px; background-position: 0px -54px;
}



#navigation-main  ul li a.nav-documents:hover {
    width: 151px; background-position: -50px 54px;
}

#navigation-main  ul li a.nav-tools:hover  {
    width: 151px; background-position: -201px 54px;
}

#navigation-main  ul li a.nav-units:hover  {
    width: 151px; background-position: -352px 54px;
}

#navigation-main  ul li a.nav-social:hover  {
    width: 151px; background-position: -503px 54px;
}

#navigation-main  ul li a.nav-people:hover  {
    width: 151px; background-position: -654px 54px;
}

#navigation-main  ul li a.nav-learning:hover  {
    width: 153px; background-position: -805px 54px;
}

HTML

<div id="navigation-main" role="navigation">

            <ul>
                <li><a href="#" class="nav-home">Home</a></li>
                <li><!-- submenu example -->
                <div><h2>Title</h2>
                <p>A. Doc 1</p>
                <p>B. Doc 2</p>
                <p>C. Doc 3</p>
                <p>D. Doc 4</p>
                ...
                </div>
                <!-- END submenu  -->
                <a href="#" class="nav-documents ">Documents</a>
                </li>
                <li><a href="#" class="nav-tools">Tools</a></li>
                <li><a href="#" class="nav-units">Units</a></li>
                <li><a href="#" class="nav-social">Social</a></li>
                <li><a href="#" class="nav-people">People</a></li>
                <li><a href="#" class="nav-learning">Learning</a></li>
            </ul>
    </div><!-- navigation-main -->

JS – for hover Intent

   <script type="text/javascript" charset="utf-8">
//<![CDATA[
    $(document).ready(function() {

      function addMega(){
        $(this).addClass("hovering");
        }

      function removeMega(){
        $(this).removeClass("hovering");
        }

    var megaConfig = {
         interval: 20,
         sensitivity: 4,
         over: addMega,
         timeout: 30,
         out: removeMega
    };


     $("#navigation-main ul li").hoverIntent(megaConfig)


    });


    //]]>
    </script>

As a bonus, this menu must run correctly on IE7.

Answer 1

Using jQuery you can use .addClass to add a CSS class like active-item when the pointer hovers over an item. In the same go, you can use .removeClass to remove a class from the other items.