jQuery click menu

Я работаю над этим меню:

HTML:

<ul id="menu">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
</ul><!-- end #menu -->

<ul class="submenu submenu-1">
    <li><a href="#">Item 1.1</a></li>
    <li><a href="#">Item 1.2</a></li>
    <li><a href="#">Item 1.3</a></li>
    <li><a href="#">Item 1.4</a></li>
</ul><!-- end #submenu.submenu-item1 -->
<ul class="submenu submenu-2">
    <li><a href="#">Item 1.1</a></li>
    <li><a href="#">Item 1.2</a></li>
    <li><a href="#">Item 1.3</a></li>
    <li><a href="#">Item 1.4</a></li>
</ul><!-- end #submenu.submenu-item1 -->

<div class="hero hero-1">content</div>
<div class="hero hero-2">content</div>
<div class="hero hero-3">content</div>
<div class="hero hero-4">content</div>

jQuery:

$('#menu li a').click(function () {
    $('#menu li').removeClass('active');
    $('.submenu, .hero').slideDown('normal');
});
$('.submenu, .hero').hide();

... в настоящее время оно показывает ВСЕ подменю и div'ы героев. Я хочу, чтобы... если это ПЕРВЫЙ li в #menu, он должен искать submenu-1, hero-1 и slidedown.

Буду очень признателен за любую помощь.

Спасибо!