2 menüs gleichzeitiger hover effekt...

Hallo liebes Forum,
ich habe folgendes Problem, es sind auf meiner Front-Page Seite ein Header-menü und ein Extra-menu die jeweils mit hover Effekt arbeiten und auch die gleiche Verlinkung haben.
Vorstellen kann man sich das so, ein Header-menü wo die Schrift Farbe und Form wechselt beim hovern und ein Extra-menü was ein Farbband ist, wo wenn gehovert wird sich jeweilige Bereich vergrößert.
Jetzt möchte ich es aber so haben, dass wenn <a> Header-menü gehovert wird das entsprechende <a> Extra-menü mit hovert und auch anders herum.

<nav>
<div id="main-nav">
<?php wp_nav_menu( array( 'theme_location' => 'header-menu','container' => '','fallback_cb' => '__return_false') ); ?>
</div><!—Ende main-nav -->

<div id="index-nav">
<?php wp_nav_menu( array( 'theme_location' => 'extra-menu','container' => '','fallback_cb' => '__return_false') ); ?>
</div><!—Ende index-nav -->
</nav>

Wie stelle ich das an?
Danke schon mal in Voraus.

ich weiß wie es gehen würde, wäre es HTLM und CSS.

<ul>
<li id="red"><a href="#"><em>Red</em></a></li>
<li id="yellow"><a href="#"><em>Yellow</em></a></li>
<li id="orange"><a href="#"><em>Orange</em></a></li>
<li id="green"><a href="#"><em>Green</em></a></li>
<li id="blue"><a href="#"><em>Blue</em></a></li>
</ul>ul li a
{
width: 100px;
height: 100px;
display: block;
}
ul li a em
{
position: relative;
}
ul li#red a
{
background: url(images/red.gif) bottom center no-repeat;
}
ul li#red a:hover
{
background-position: top center;
}
ul li#red a em
{
top: 150px;

}