CSS- Expanding An Element Without Losing Page's Original Structure. To create Drop Down

问题

I want to create a drop down menu (alternate to Browser's <select> tag).

So Here I've created a <div> in another <div> to stimulate the <select>

But When I expand the dropdown <div> The Exapanded div Pushes down all other page's structure.

I mean, Here is output of my actual code:

Clicking on Expand Produces:

But I want Output Something Like :

I tried adding float:left, z-index, position:absolute; etc. But No Luck.

Here is My Code:

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

And Here is The: ***Fiddle***

Hope Experts Here Will Help Me. Thanks In Advance.

回答1:

I added only position:absolute in your class and it works

.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 the updated fiddle

回答2:

You could just apply position: absolute to .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;
}

An example : http://jsfiddle.net/FuhgN/6/

来源：https://stackoverflow.com/questions/23308383/css-expanding-an-element-without-losing-pages-original-structure-to-create-dr

标签

jquery

html

css

css3

z-index