Question

我有一个名为subMenuRigth的div这个div在<li>里面我想要完成的是div出现在名为subMenu的div旁边我试过非常不同的方式做它，但它不起作用，它的nevers显示包含。

这是我的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>

这是我的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

拼写错误后：

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

.options{
    position:relative;
}

结果是.....（鼓滚）

http://jsfiddle.net/ZxvkN/

这是严格的！ ;）

Answer 2

以下是修改原始现场演示后的工作示例：working live demo

首先，您要按类而不是按ID访问javascript中的subMenu。然后我稍微更新了CSS以使定位正确。

Answer 3

您可以在http://jsfiddle.net/CyjfU/

查看工作示例

解决方案基本上需要两个部分：1）css样式; 2）修改结构化;

<强> CSS：

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

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

css的关键是建立元素的定位。要建立的第一个定位是#subMenu。您想将位置设置为position: relative;。第二部分是#subMenuRight。您希望将位置设置为position: absolute;（如果父级未设置为相对，则此设置将默认为最近的父属性 - 当前不存在，因此它将定位为{{1}您还需要通过声明absolute来确定绝对元素的位置。这会将顶部位置设置为0px以对齐顶部边缘并将左侧缩进150px。

结构部分包含两部分：a）HTML; b）JavaScript

<强> HTML：

将课程top: 0px; left: 150px;添加到包含您的真实子菜单的subSubMenu。

<强> JavaScript的：

已更改：li至$(".subMenu").hover(openRigthMenu,closeRigthMenu);

Answer 4

有一些事情并不是很清楚。例如，您将拥有多于1个子菜单。另外，如果你希望它除了subMenu的类div之外，为什么它在树层次结构中如此深入地嵌套？。

尽管如此，要回到您想要实现的目标，您可以添加以下内容：

#subMenu {
  position: relative;
}

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

这会解决它，但我不认为这正是你正在寻找的东西，就好像你有一个以上的子弹道，它们都会堆叠在一起。也许你应该创建一个兄弟到subMenu，你将把所有subMenuRight项目放在哪里？

另一个答案可能是将您的子菜单更改为<ul>标记，并在里面创建一个包含2个div的<li>，其中1个是内容，另一个是您的subMenuRight。

创建一个向下钻取菜单

4 个答案: