Multiple Nav update Jquery

Question

Created a header and footer nav. The header nav contains 1 UL and the footer nav contains 5 UL. I want the li:first child of each UL in the footer nav to match up with the header nav. The footer nav has the same main li as the header nav but contain sub li within them Can someone please help me out?

I created a jsFiddle of my issue:

http://jsfiddle.net/WkZuv/41/

$(".Nav > li").live({
    mouseover:function(){
        $(this).addClass("menuHover");
    },
    mouseout:function(){
        $(this).removeClass("menuHover");
    },
    click:function(){
        $(".Nav > li").removeClass("menuClicked");
        $(this).addClass("menuClicked");
    }
});

$(".footer > li:first-child").live({
    mouseover:function(){
        $(this).addClass("menuHover");
    },
    mouseout:function(){
        $(this).removeClass("menuHover");
    },
    click:function(){
        $(".Nav > li").removeClass("menuClicked");
        $(".Nav > li").eq($(this).index()).addClass("menuClicked");     

         $(".footer > li").removeClass("menuClicked");
        $(this).addClass("menuClicked");  
    }
});

.menuHover{
    background-color:#666;
    color:#fff;
}
.menuClicked{
    background-color:yellow;
    color:#666;
}

.footerTitle{
    font-weight: bold;
    color:black;
}

<h1>Header NAV</h1>
<ul class="Nav">
    <li class ="menuClicked"> List 1 </li> 
    <li>List 2 </li>
    <li> List 3 </li>
    <li> List 4 </li>
    <li> List 5</li>
</ul>

<hr />

<h1>FOOTER NAV</h1>
<ul class="footer">
    <li class ="footerTitle"> List 1 </li> 
    <li>Sub List 2 </li>
    <li>Sub List 3 </li>
    <li> Sub List 4 </li>
    <li>Sub List 5</li>
</ul>
<ul class="footer">
    <li class ="footerTitle"> List 2 </li> 
    <li>Sub List 2 </li>
    <li>Sub List 3 </li>
    <li> Sub List 4 </li>
    <li>Sub List 5</li>
</ul>
<ul class="footer">
    <li class ="footerTitle"> List 3 </li> 
    <li>Sub List 2 </li>
    <li>Sub List 3 </li>
    <li> Sub List 4 </li>
    <li>Sub List 5</li>
</ul>
<ul class="footer">
    <li class ="footerTitle"> List 4 </li> 
    <li>Sub List 2 </li>
    <li>Sub List 3 </li>
    <li> Sub List 4 </li>
    <li>Sub List 5</li>
</ul>
<ul class="footer">
    <li class ="footerTitle"> List 5 </li> 
    <li>Sub List 2 </li>
    <li>Sub List 3 </li>
    <li> Sub List 4 </li>
    <li>Sub List 5</li>
</ul>

Answer 1

I think I understand what you are looking for. Try something like this:

$(".Nav > li").live({
    mouseover:function(){
        $(this).addClass("menuHover");
        $(".footer > li:first-child").eq($(this).index()).addClass("menuHover");
    },
    mouseout:function(){
        $(this).removeClass("menuHover");
        $(".footer > li:first-child").eq($(this).index()).removeClass("menuHover");
    },
    click:function(){
        $(".Nav > li").removeClass("menuClicked");
        $(this).addClass("menuClicked");
        $(".footer > li:first-child").removeClass("menuClicked").eq($(this).index()).addClass("menuClicked");
    }
});

$(".footer > li:first-child").live({
    mouseover:function(){
        $(this).addClass("menuHover");
        $(".Nav>li").eq($(".footer").index($(this).parent("ul"))).addClass("menuHover");
    },
    mouseout:function(){
        $(this).removeClass("menuHover");
        $(".Nav>li").eq($(".footer").index($(this).parent("ul"))).removeClass("menuHover");
    },
    click:function(){
        $(".Nav > li").removeClass("menuClicked");
        $(".footer > li:first-child").removeClass("menuClicked");
        $(this).addClass("menuClicked");
        $(".Nav>li").eq($(".footer").index($(this).parent("ul"))).addClass("menuClicked");
    }
});

DEMO: http://jsfiddle.net/dirtyd77/WkZuv/65/