javascript - jQuery - テキストまたは画像リンクのロールオーバー、薄暗いテキスト、サブメニュー付きのリンク画像

Question

テキストリンクと画像リンクがリンクされたメニューを作成しようとしています。テキストまたは画像リンクのいずれかをローリングすると、他のテキストと画像が暗くなります。

テキストまたは画像リンクをロールオーバーすると、各メインリンクのサブリンクがフェードインするようにしています。

質問: リンクまたは画像がロールオーバーされたときに特定の div サブメニューを表示する方法を教えてください。 http://jsfiddle.net/philoman/bWYwn/67/ . ご協力いただきありがとうございます。

<ul id="buttons" class="together">
<li><a href="#">Button 1</a>
    <ul id="button-1-submenu">
        <li><a href="#">Sub-Menu 1</a>
        <li><a href="#">Sub-Menu 2</a>
        <li><a href="#">Sub-Menu 3</a>
    </ul>
</li>

<li><a href="#">Button 2</a>
    <ul id="button-2-submenu">
        <li><a href="#">Sub-Menu 1</a>
        <li><a href="#">Sub-Menu 2</a>
        <li><a href="#">Sub-Menu 3</a>
    </ul>
</li>

<li><a href="#">Button 3</a>
    <ul id="button-3-submenu">
        <li><a href="#">Sub-Menu 1</a>
        <li><a href="#">Sub-Menu 2</a>
        <li><a href="#">Sub-Menu 3</a>
    </ul>
</li>
</ul>

<ul id="button-images" class="together">
    <li><a href="#"><img src="Button-1-image.jpg" width="50px" /></a></li>
    <li><a href="#"><img src="Button-2-image.jpg" width="50px" /></a></li>
    <li><a href="#"><img src="Button-3-image.jpg" width="50px" /></a></li>
</ul>