Сложный вопрос по jQuery

Ребят, добрый день!

Довольно сложный вопрос по jquery. В общем есть меню... демку можно посмотреть здесь.

Объясню в чём суть. Нажали на "Чай" - он должен открыться. Нажали на "Кофе" - закрылся "Чай" открылся "Кофе". Вроде до этого момента всё понятно. Реализуемо без проблем на jQuery.

Дальше - больше. В меню одинаковая разметка:

<div class="coffee_title">

                                    <div class="coffee_title_picture">

                                        

                                    </div>

                               

                                    <div class="title_text">

                                         <b>кофе</b>

                                     </div>

                                 </div>   

                            

                              <div class="menu">

                            <div class="menu_text">

                                <div class="menu_item">

                                    <div class="menu_item_text">Черный</div>

                                </div>

                                <div class="menu_item">

                                    <div class="menu_item_text">

                                       Мокко

                                    </div>

                                </div>

                                <div class="menu_item">

                                    <div class="menu_item_text">

                                        Арабика

                                    </div>

                                </div>

                                <div class="menu_item">

                                    <div class="menu_item_text">

                                        Капуччино

                                    </div>

                                </div>

                                <div class="menu_item">

                                    <div class="menu_item_text">

                                        Американо

                                    </div>

                                </div>

                                <div class="menu_item">

                                    <div class="menu_item_text">

                                        Латте

                                    </div>

                                </div>

                                

                                

                               </div> 

                            </div>

Это тоже понятно. Потому что сейчас здесь просто много html. А будет одно меню в шаблоне, пункты меню будут браться из базы данных. Я специально сидел, всё это дело унифицировал в CSS. Чтобы потом парки не было.

Вопрос: мы кликнули на чае. Как на jQuery понять, что сворачивать нужно именно меню чая? Разметку менять очень нежелательно, хотелось бы чтобы не было что-то подобного:

.tea_menu{}

.tea_menu_text{}

.tea_menu_item{}

.coffee_menu{}

и т.д. Просто абстрактные .menu, .menu_item и т.д.

Пробовал таким образом:

 $('.menulink').bind('click', function()

    {

          $('.menulink').addClass('unique');

         $('.unique .menu').fadeOut();

    });

Вот фрагмент разметки с этим элементом:

 <div class="tea_title">

                        <div class="tea_title_picture">

                            

                        </div>

                        

                        <div class="title_text">

                            <a href="#" class="menulink"><b>чай</b></a>

                        </div>

                     </div>    

                        <div class="menu">

                            <div class="menu_text">

                                <div class="menu_item">

                                    <div class="menu_item_text">Черный</div>

                                </div>

                                <div class="menu_item">

                                    <div class="menu_item_text">

                                        Зеленый

                                    </div>

                                </div>

                                <div class="menu_item">

                                    <div class="menu_item_text">

                                        Улун

                                    </div>

                                </div>

                                <div class="menu_item">

                                    <div class="menu_item_text">

                                        Белый

                                    </div>

                                </div>

но у меня ничего не выходит, ибо согласно этому коду:

$('.unique .menu').fadeOut();

элемент .menu должен находиться строго внутри элемента .unique. А это не так. Более подробно можно посмотреть разметку на представленной странице.

В общем, надеюсь понятно выразился. Если нет, то ещё раз:

Как понять, что при клике на элементе "Чай" нужно сворачивать именно меню "Чай"?

Всем заранее спасибо за помощь! :)