Question

I’m develop a menu, which have levels, each level of menus have it’s own styles and from the third level forward all levels have the same style called subMenRight my problem it’s that if you’re in the level two called with the style subMenu open all the follow div that have the class called subMenuRight i know that the problem it’s the selector, so my question it’s how can i modify the selector??

my live example

my 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>

my 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;
    }

my 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

Demo

---

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

needs to be

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

and similar