помогите с селектором jquery для дочерних узлов

Question

Я разрабатываю меню, в котором есть уровни, каждый уровень меню имеет свои собственные стили, и начиная с третьего уровня все уровни имеют одинаковый стиль под названием subMenRight Моя проблема в том, что если вы на втором уровне вызывается со стилем subMenu открыть все последующие элементы div с классом subMenuRight я знаю, что проблема в селекторе, поэтому мой вопрос в том, как я могу изменить селектор ??

мой живой пример

мой HTML

<div id="menuContainer">
    <div class = "menu ui-accordion-header ui-state-default ui-corner-all">
        <label class="formatText">Cliente</label><span class="ui-icon ui-icon-triangle-1-e menuIcon" style="float: right"></span>
            <div class = "subMenu ui-accordion-header ui-state-default ui-corner-all">
                <ul class="options">
                    <li>
                        <label class="formatText">Ver Cliente</label><span class="ui-icon ui-icon-triangle-1-e" style="float: right"></span>
                            <div class = "subMenuRight ui-accordion-header ui-state-default ui-corner-all">
                                <ul class="options">
                                    <li>
                                        <label class="formatText">Por Nombre</label><span class="ui-icon ui-icon-triangle-1-e" style="float: right"></span>
                                            <div class = "subMenuRight ui-accordion-header ui-state-default ui-corner-all">
                                                <ul class="options">
                                                    <li><label class="formatText">sub sub menu</label></li>
                                                    <li><label class="formatText">prueba</label></li>
                                                </ul>
                                            </div>
                                    </li>
                                    <li>
                                        <label class="formatText">Por Campana</label>
                                    </li>
                                </ul>
                            </div>
                    </li>
                    <li>
                        <label class="formatText">Reportes para Cliente</label>
                    </li>
                </ul>
            </div>
    </div>
    <div class = "menu ui-accordion-header ui-state-default ui-corner-all">
        <label class="formatText">Departamento</label><span class="ui-icon ui-icon-triangle-1-e menuIcon" style="float: right"></span>
            <div class = "subMenu ui-accordion-header ui-state-default ui-corner-all">
                <ul class="options">
                    <li>
                        <label class="formatText">Por Nombre</label>
                    </li>
                    <li>
                        <label class="formatText">Por Cliente</label>
                    </li>
                </ul>
            </div>
    </div>
</div>

мой css

        #menuContainer
    {
        position: absolute;    
    }

    #menuAtento
    {
        height: 23px;
        padding-left: 8px;
        padding-top: 12px;
    }

    .menu
    {
        /*min-width: 100px;
        max-width: 155px;*/
        width: 155px;
        height: 17px;
        float: left;
    }

    .subMenu
    {
        display: none;
        width: 155px;
    }

    .subMenuRight
    {
        display: none;
        width: 155px;
        position: absolute;
        left: 100%;
        top: 0px;
    }

    .options li
    {
        position: relative;
        padding: 0px 2px 0px 0px;
    }

    .menu .ui-state-hover
    {
        border-width: 0;
        margin-right: 2px;
    }

    .subMenu .ui-state-hover
    {
       border-width: 0;
    }

мои JS

$(document).ready(initialize);

function initialize() {

$(".menu").hover(mouseIn, mouseOut);
    $(".options li").hover(overOption, outOption);
    $(".subMenu li").hover(openRightMenu, closeRightMenu);
    $(".menu").css('border', '0px');
    $(".menu").css('margin-right', '5px');
    $(".subMenu").css('margin-top', '4px').css('border', '1px solid #DDDDDD').css('padding', '6px');
    $(".subMenuRight").css('padding', '6px');
}

function mouseIn() {
    $(this).find('span:first').attr('class', '');
    $(this).find('span:first').attr('class', 'ui-icon ui-icon-triangle-1-s');
    $(".subMenu", this).slideDown(100);
}

function mouseOut() {
    $(this).find('span:first').attr('class', '');
    $(this).find('span:first').attr('class', 'ui-icon ui-icon-triangle-1-e');
    $(".subMenu", this).slideUp(100);
}

function overOption() {
    $(this).attr('class', 'ui-state-hover ui-corner-all');
}

function outOption() {
    $(this).attr('class', '');
}

function openRightMenu() {
    $(".subMenuRight", this).slideDown(10);
}

function closeRightMenu() {
    $(".subMenuRight", this).slideUp(10);
}

Answer 1

Демо

---

$(".subMenuRight", this).slideDown(10);

должно быть

$(this).find(".subMenuRight:first");

и аналогичные

Answer 2

Лично я бы использовал Superfish (http://users.tpg.com.au/j_birch/plugins/superfish/). Будет намного проще заставить его работать с IE6 и т. Д.