Question

我想创建一个下拉菜单（浏览器＆＃39; <select>标记的替代品。）

所以，我在另一个<div>中创建了<div>来刺激<select>

但是，当我展开下拉列表时<div> Exapanded div推送所有其他网页的结构。

我的意思是，这是我实际代码的输出： Initial

点击展开制作： OnClick

但是我想要输出类似于： Expected

我尝试添加float:left，z-index，position:absolute;等等但是没有运气。

这是我的代码：

<html>
<head>
    <title>Drop Down Demo</title>
    <style type="text/css">
.ddown{
        width:250px;
        background: #aaa;
        border: 2px solid #777;
        color: #444;
        text-align: center;
        margin: 0px;
        display: inline-block;
    z-index:5;
    float:left;
    overflow:visible;
    }
    .ddown a{
        width: 100%;
        height: 25px;
        text-align: left;
        color: #666;
        text-decoration: none;
        background: #ddd;
        border: 1px solid #999;
    z-index:5;
    display:none;

    }
    .ddownHead{
        display: inline-block !important;
    }
    .ddownItem{
        display: inline-block !important;
        z-index:5;!important
    }
    .ddownItem:hover{
        background: #33a;
        color: #fff;
    }
    .ddown_busy{
        background: #77a !important;
        border: 1px solid #558 !important;
        color: #fff !important;
    }
</style>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
    function toggle_expand_ddown(x){
        if($(x).closest("div").find("a").eq(0).hasClass("ddown_busy")){
            $(x).closest("div").find("a").eq(0).removeClass("ddown_busy");
        $(x).closest("div").find("div").each(function(){
            $(this).find("a").each(function(){
                $(this).removeClass("ddownItem");
            });
        });
        }
        else
        {
        $(x).closest("div").find("a").eq(0).addClass("ddown_busy");
        $(x).closest("div").find("div").each(function(){
            $(this).find("a").each(function(){
                $(this).addClass("ddownItem");
            });
        });
        }
    }
    </script>
</head>
<body>

<div style="width:100%;height:auto;background:#aa0;border:2px solid #770;z-index:10;">
    <div class="ddown">
    <a class="ddownHead" href="#!" Onclick="toggle_expand_ddown(this);">Click to Expand</a>
    <div style="z-index:6;">
        <a href="#!">Item 1</a>
        <a href="#!">Item 1</a>
        <a href="#!">Item 1</a>
        <a href="#!">Item 1</a>
    </div>
    </div>
    This is Another Child in same Parent
</div>
<div style="background:#eee;color:#555;width:100%;height:200px;display:inline-block;z-index:2;box-shadow:10px 10px 10px 2px rgba(0,0,0,0.8);border:2px solid #555;border-radius:12px;text-align:center;margin:5px;position:absolute;">Heya</div>
</body>
</html>

以下是：***Fiddle***

希望这里的专家能帮助我。在此先感谢。

Answer 1

您可以将position: absolute应用于.ddown

.ddown{
    width:250px;
    background: #aaa;
    border: 2px solid #777;
    color: #444;
    text-align: center;
    margin: 0px;
    display: inline-block;
    z-index:5;
    float:left;
    overflow:visible;
    position: absolute;
}

示例：http://jsfiddle.net/FuhgN/6/

Answer 2

我在您的课程中仅添加了position:absolute，而且工作正常

.ddown{
        width:250px;
        background: #aaa;
        border: 2px solid #777;
        color: #444;
        text-align: center;
        margin: 0px;
        display: inline-block;
    z-index:5;
    float:left;
    overflow:visible;
    position: absolute;
    }

HERE 更新的小提琴

CSS-扩展元素而不会丢失页面的原始结构。创建下拉列表

2 个答案: