Question

I have a div called subMenuRigth this div it’s inside a <li> what i want to accomplish is that div appears beside of the the div called subMenu i tried in very differents ways to make it but it’s doesn’t work, it’s nevers shows the contains.

this is my html

<div id="menu" class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all">
    <label class="formatText" id="lblIndicators">Tal</label>
    <span class="ui-icon ui-icon-triangle-1-e menuIcon" style="float:right"></span>
    <div id="subMenu" class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all">
        <ul class="options">
            <li>
                <label class="formatText">SubTal</label>
                <span class="ui-icon ui-icon-triangle-1-s" style="float:right"></span>
                <div id="subMenuRight" class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all">
                    <ul class=options>
                        <li>hi</li>
                        <li>bye</li>
                    </ul>
                </div>
            </li>
            <li>algo</li>
        </ul>
    </div>
</div>

this my css

#menu
{
    width:150px;
}
#subMenu
{
    display:none;
    width:149px;
}

#subMenuRight
{
    display:none;
    width:150px;
    float:rigth;
}

my js

$(document).ready(initialize);

function initialize(){

    $("#menu").hover(mouseIn,mouseOut);
    $(".options li").hover(overOption,outOption);
    $(".subMenu").hover(openRigthMenu,closeRigthMenu);
}

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

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

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

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

function openRigthMenu(){
    $("#subMenuRight").css('display','block');
    $("#subMenuRight").css('outline','0');
    $("#subMenuRight").slideDown(100);
}

function closeRegithMenu(){
    $("#subMenuRight").slideUp(100);
}

My live demo

Answer 1

After typo fixing:

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

.options{
    position:relative;
}

and the result was….. (drum roll)

http://jsfiddle.net/ZxvkN/

it was rigth! 😉