create a drilldown menu [closed]

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center. Closed 10 years ago.

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">开发者_JAVA百科
        <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

---

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

---

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

---

Here is a working example after modifying your original live demo: working live demo

First off you are accessing your subMenu in javascript by class instead of by id. I then updated the CSS a little to get the positioning correct.

---

There's a few things that aren't really clear. For example, will you have more than 1 submenuRight. Also, if you want it to be besides the subMenu's class div, why is it nested so deeply in the tree hierarchy?.

Nonetheless, to get back to what you want to achieve you could add the following:

#subMenu {
  position: relative;
}

#subMenuRight {
    position: absolute;
    top: 0;
}

This would fix it but I don't think this is exactly what you are looking for, as if you have more than one submenuright, they would all be stacked on top of each other. Maybe you should create a sibling to subMenu where you would put all your subMenuRight items?

One other answer could be to change your subMenu to a <ul> tag, and inside create a <li> with 2 divs, 1 being the content, the other, your subMenuRight.