Question

Hihi，我正在尝试使用DIV创建一个下拉菜单，但遇到了一个我无法弄清楚如何克服的问题。我们来看看下面的代码：

<!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" xml:lang="en"> 
<head> 
    <title>test</title> 
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#menu").click(function () {
                $('#menuItem').slideDown('slow');
            });
        });
    </script>
</head> 
<body> 
    <div style="width: 500px; margin: 0px auto; padding: 10px;">
        <div id="menuItem" style="border: 1px solid blue; position: relative; z-index: 10; float: right; display: none; cursor: pointer;">
            MenuItem1<br />
            MenuItem2<br />
            MenuItem3<br />
            MenuItem4<br />
            MenuItem5<br />
            MenuItem6<br />
            MenuItem7
        </div>
        <div id="menu" style="border: 1px solid blue; position: relative; z-index: 10; float: right; cursor: pointer;">
            My Menu
        </div>
    </div>

    <div style="margin: 50px 0px; padding: 0px; text-align: center;">
        <div style="width: 500px; margin: 0px auto; border: 1px solid red; padding: 10px; height: 500px;">
            <div style=" position: relative; z-index: 1; float: right;">Form Element</div>
        </div>
    </div>
</body>
</html>

我想要实现的是让我的下拉菜单保持在我的表单元素div之上。请告知如何做到这一点。非常感谢！

：）

Answer 1

快速而肮脏：我为菜单添加了一个绝对定位的外部包含，然后将top:40px应用于内容div以将其向下推以补偿菜单的高度。

<div style="position:absolute;width:100%;">
    <div style="width: 500px; margin: 0px auto; padding: 10px; ">
        <div id="menuItem" style="border: 1px solid blue; position: relative; z-index: 10; float: right;  display: none; cursor: pointer;">
            MenuItem1<br />
            MenuItem2<br />
            MenuItem3<br />
            MenuItem4<br />
            MenuItem5<br />
            MenuItem6<br />
            MenuItem7
        </div>
        <div id="menu" style="border: 1px solid blue; position: relative; z-index: 10; float: right; cursor: pointer;">
            My Menu
        </div>
    </div>
</div>

    <div style="margin: 50px 0px; padding: 0px; text-align: center;  position:relative; top:40px; ">
        <div style="width: 500px; margin: 0px auto; border: 1px solid red; padding: 10px; height: 500px;">
            <div style=" clear:both;  z-index: 1; float: right;">Form Element</div>
        </div>
    </div>
</body>
</html>

正如我输入的那样，dotty已经用一种非常相同的方法在我面前回答了问题。但是，在上面的代码中，单个菜单div正如您所希望的那样正确地相互浮动，就像您在问题中发布的第一个代码中一样。

现在可能有一些div和样式元素有点冗余。

编辑：我现在确实想到了dotty代码中菜单的操作实际上可能是你想要菜单的方式。

Answer 2

将#menuItem div放在#menu div中，并将#menuItem div的位置设置为绝对位置并移除它的浮点数。

<!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" xml:lang="en"> 
<head> 
    <title>test</title> 

    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>


<script type="text/javascript">
    $(document).ready(function () {
        $("#menu").click(function () {
            $('#menuItem').slideDown('slow');
        });
    });
</script>
</head> 
<body> 
<div style="width: 500px; margin: 0px auto; padding: 10px;">

    <div id="menu" style="border: 1px solid blue; position: relative; z-index: 10; float: right; cursor: pointer;">
        My Menu

        <div id="menuItem" style="border: 1px solid blue; position: absolute; z-index: 10; display: none; cursor: pointer;">
            MenuItem1<br />
            MenuItem2<br />
            MenuItem3<br />
            MenuItem4<br />
            MenuItem5<br />
            MenuItem6<br />
            MenuItem7
        </div>

    </div>
</div>

<div style="margin: 50px 0px; padding: 0px; text-align: center;">
    <div style="width: 500px; margin: 0px auto; border: 1px solid red; padding: 10px; height: 500px;">
        <div style=" position: relative; z-index: 1; float: right;">Form Element</div>
    </div>
    </div>
</body>
</html>

使用float堆叠两个DIV：右

2 个答案: