create a drilldown menu [closed]

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! ;)

Answer 2

You can view the working example at: http://jsfiddle.net/CyjfU/

The solution essentially requires two parts: 1) css styling; 2) modified structured;

CSS:

#subMenu
{
    display:none;
    width:149px;
    position: relative;
}

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

The key with the css is establishing the positioning of the elements. The first positioning to establish is that of #subMenu. You want to set the position to position: relative;. The second part is with the #subMenuRight. You want to set the position to that to position: absolute; (if parent was not set to relative then this setting would default to the nearest parent property -- which doesn't currently exist so it would be positioned as absolute to the body. You will also want to establish the position of the absolute element by declaring top: 0px; left: 150px;. This sets the top position to 0px to align the top edges and indents the left by 150px.

The structure portion contains two parts: a) HTML; b) JavaScript

HTML:

Added the class subSubMenu to the li containing your true sub-menu.

JavaScript:

Changed: $(".subMenu").hover(openRigthMenu,closeRigthMenu); to $(".subSubMenu").hover(openRightMenu,closeRightMenu);