Question

如何将sububmenu1（蓝色背景）堆叠在submenu1（红色背景）下？我尝试过使用z-index但它不起作用。在下面的jsfiddle中，subsubmenu1堆叠在子菜单1的顶部。

HTML：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Gama Corporate Services</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#submenu1,#submenu2").children().hide();
    $("#subsubmenu1").children("ul").hide();

    $("#submenu1,#submenu2").hover( 
        function(){//onmouseover 
            $(this).children("ul").slideDown(); 
        }, 
        function(){//onmouseout 
            $(this).children("ul").slideUp(); 
    });


$("#subsubmenu1").hover(
    function(){//onmouseover

        $(this).children("ul").animate({marginLeft:"50px"});
        $(this).children("ul").show();
    },
    function(){//onmouseout
        $(this).children("ul").animate({marginLeft:"0"});
        $(this).children("ul").hide();
    }); 
});
</script>
</head>

<body>
<div class="contentwrapper">
<div id="header">
<div id="logo">
    <img src="images/small_gama_logo.png" />
</div>
<div id="company_name">
    Gama Corporate Services Sdn Bhd
</div>
<div id="navbar">
    <ul id="menu">
        <li>Home</li>
        <li>About</li>
        <li id="submenu1">Register Company
            <ul>
                <li id="subsubmenu1">New Sendirian Berhad Registration
                    <ul>
                        <li>Company Price</li>
                        <li>Register New Company</li>
                        <li>Steps to Incorporate</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li id="submenu2">Buy Company
            <ul>
                <li>Sendirian Berhad Ready Made Companies in Malaysia</li>
            </ul>
        </li>
        <li>Contact</li>
    </ul>
</div>
</div>

<div id="leftcolumn">hello</div>
<div id="contentcolumn">Welcome to Gama Corporate Services.
This website is under construction</div>
<div id="rightcolumn">how ru</div>
<div id="footer">copyright gama corporate services</div>
</div><!--end contentwrapper-->

</body>
</html>

的style.css

 /* CSS Document */
html body{
    padding:0;
    margin:0 auto;
}

.contentwrapper{
    width:900px;
    margin-left:auto;
    margin-right:auto;
    height: auto !important;
}
#header{
/*  height:20%;
*/  width:900px;
    height:280px;
    /*background-color:#009999;*/
    background-image:url('../images/bg_image.png');
    background-repeat:no-repeat;
    float:left;
    text-align:center;
}
#logo{
margin-top:15%;
float:left;
width:30%;
}
#company_name{
float:left;
font:"Times New Roman", Times, serif;
font-size:36px;
margin-top:20%;
}
#navbar{
/*  height:10%;
*/  width:900px;
    color:#ffffff;
    float:left;
    margin-top:2%;
    padding:0;
    z-index:0;
    position:relative;

}
#menu{
    list-style-type:none;
    margin:0;
    padding:0;
    position:absolute;
}

#menu li{
float:left;
    display:block;
    width:120px;
    text-align:center;
    background-color:#FF0000;
    padding:0;
    margin:0;

}
/*#menu li ul ul li*/
#subsubmenu1 ul li
{position:relative;
left:0;
top:-30px;
background:#3399CC;
}

#leftcolumn{
    float:left;
    width:20%;
    background-color:#FF9900;
}
#contentcolumn{
    float:left;
    width:60%;
    background-color:#ffffff;
}
#rightcolumn{
    float:left;
    width:20%;
    background-color:#FF9900;
}
#footer{
/*  height:10%;
*/  width:inherit;
    padding-top:4px;
    background-color:#009999;
    text-align:center;
}

Answer 1

您必须将position:absolute与z-index

一起使用

在悬停事件中尝试此代码：

$(this).children("ul").animate({marginLeft:"50px"}).css({"position":"absolute", "z-index":"-1"});

在顶部导航中隐藏其他元素

Replace this : $("#submenu1,#submenu2").children().hide();

With : $("#submenu1,#submenu2").children("ul").hide();在你的剧本中。

祝你好运!!

jquery：导航栏：使用z-index的子子菜单列表的堆栈顺序

1 个答案: