Jquery突出显示水平隐藏子菜单

Question

我在这里发布我的问题是为了得到一些帮助。我有一个带有固定菜单的横向网页。在这个菜单上，我有隐藏的子菜单，属于菜单的一个未隐藏的项目。例如，主项目是可见的并且隐藏了一个子meny home2。我想，当我在家2项目时，家庭是高亮的。我在Jquery尝试了一些东西，但它没有用。你知道我做错了吗？

Here my fiddle.

我的HTML：

<div id="cssmenu">
<ul id="list">
    <li id="item1"><a href="#home">Home</a></li>
    <li id="item2" class="hide"><a href="#home2"></a></li>
    <li id="item3"><a href="#newsletter">Newsletter</a></li>
    <li id="item4"><a href="#directions">Directions</a></li>
    <li id="item5"><a href="#directions2">Directions2</a></li>
    <li id="item6"><a href="#contact">Contact us</a></li>
    <li id="item7"><a href="#actor">actor</a></li>
    <li id="item8" class="hide"><a href="#actor2"></a></li>
    <li id="item9" class="hide"><a href="#actor3"></a></li>
    <li id="item10"><a href="#market">market</a></li>
    <li id="item11" class="hide"><a href="#market2"></a></li>
    <li id="item12" class="hide"><a href="#market3"></a></li>
    <li id="item13"><a href="#calendar">calendar</a></li>

我的css：

   #cssmenu li.active a {
    display: inline;
    border-bottom: 3px solid #00b8fd;
    float: left;
    margin: 0;
}

#cssmenu li.active2 a {
    display: inline;
    border-bottom: 3px solid #00b8fd;
    float: left;
    margin: 0;
}

我的Jquery脚本：

$(function(){
if( $("#item2").hasClass('active' ))
{
  $("item1").addClass('active2');
}
if ( $('#item2').hasClass('') && $('item1').hasClass('active2' )) {
$('#item1').removeClass('active2');
}


    if($("item8").hasClass('active'))
    {
        $("item7").addClass('active2');
    }
if ( $('#item8').hasClass('') && $('item7').hasClass('active2' ) && $('item9').hasClass('') {
$('#item7').removeClass('active2');
}

});

$(function () {
        var 
            animation = function ( href ) {
                var 
                    name = "active",
                    element = $( "a[href='" + href + "']" );

                $( "html, body" ).stop().animate( {
                    scrollLeft: $( href ).offset().left
                }, 1200 );

                element.closest( "ul" ).find( "li" ).removeClass( name );
                element.parent().addClass( name );
            },
            menu = $( "#list" );

        animation( menu.find( "li" ).eq( 0 ).find( "> a" ).attr( "href" ) );

        $( "#cssmenu a" ).bind( "click", function( event ) {
            var target = $( this ).attr("href");

            animation( target );

            event.preventDefault();
        } );

        $( "#next, #prev" ).click( function ( event ) {
            var
                positionActiveClass = menu.find( "> li.active" ).index(),
                menuLength = menu.find( "> li" ).length - 1,
                buttonId = $( this ).attr( "id" );

            if ( buttonId === "next" ) {
                if ( positionActiveClass === ( menuLength ) ) {
                    newElementActiveClass = menu.find( "li" ).eq( 0 );
                    newPositionActiveClass = newElementActiveClass.find( "> a" ).attr( "href" );

                    animation( newPositionActiveClass );
                } else {
                    newElementActiveClass = menu.find( "li" ).eq( positionActiveClass + 1 );
                    newPositionActiveClass = newElementActiveClass.find( "> a" ).attr( "href" );

                    animation( newPositionActiveClass );
                }
            } else {
                if ( positionActiveClass === 0 ) {
                    newElementActiveClass = menu.find( "li" ).eq( menuLength );
                    newPositionActiveClass = newElementActiveClass.find( "> a" ).attr( "href" );

                    animation( newPositionActiveClass );
                } else {
                    newElementActiveClass = menu.find( "li" ).eq( positionActiveClass - 1 );
                    newPositionActiveClass = newElementActiveClass.find( "> a" ).attr( "href" );

                    animation( newPositionActiveClass );
                }
            }

            event.preventDefault();
        } );

    } );