Question

我正在开发一个（CSS）下拉菜单，它包含一个span元素（父元素）和一个ul里面的元素（子元素，实际的下拉列表）。父亲是一个相对定位的块元素;孩子有绝对的定位，以便在孩子的父母下面显示。

现在我需要将子项下拉列表显示在父项下方。但是，我宁愿不给孩子一个固定的顶部偏移（即父元素的高度）。孩子可能有一个可变的高度，我不想依赖固定的高度。有没有办法在不需要额外的Javascript的情况下做到这一点？

HTML看起来像这样：

<span class="dropdown demo" data-dropdown-trigger="click"><i class="fa fa-caret-down"></i> 20 results per page
    <ul class="list">
        <li><a href="javascript:;">10 results</a></li>
        <li><a href="javascript:;">20 results</a></li>
        <li><a href="javascript:;">50 results</a></li>
        <li><a href="javascript:;">100 results</a></li>
    </ul>
</span>

CSS：

span.demo {
    width:150px;
    margin:50px 0 0 50px;
}

span.dropdown {
-webkit-user-select: none;  
   -moz-user-select: none;    
    -ms-user-select: none;      
        user-select: none;
    position:relative;
    font-size:11px;
    display:block;
    color:#000;
    padding:5px;
    border-radius:2px;
    border:1px solid #FFF;
    font-family:'Open Sans', sans-serif;
    cursor:pointer;
}
span.dropdown.show {
    border:1px solid #CCC;
    cursor:default;
}
span.dropdown a {
    outline:0;
}
span.dropdown ul.list {
    display:none;
    position:absolute;
    top:23px;
    left:0;
    width:100%;
    background:#FFF;
    box-shadow:2px 2px 4px rgba(0,0,0,0.15);
    padding:0;
    margin:0;
    color:#000;
    list-style:none;
    border:1px solid #ccc;
    border-radius:3px;
    z-index:5;
}
span.dropdown.show ul.list {
    display:block;
}
span.dropdown ul.list li a {
    color:#31357F;
    display:block;
    float:none;
    margin:0;
    padding:5px;
    text-decoration:none;
    background:#FFF;
    text-align:left;
    margin:0;
}
span.dropdown ul.list li a:hover {
    color:#FFF;
    background:#217ba4;
}

我离开了Javascript，负责处理下拉列表。您可以在Jsfiddle上查看。基本上，我想摆脱top：23px in span.dropdown ul.list。将其更改为底部：0;让它落在父母身上。

＆＃13;

$(document).ready(function(){
    $.fn.dropdown = function(){
        var cfg = {
            ddclass: '.dropdown',
            delayout: 700
        };
        var dd = $(this),
            ev = dd.data('dropdown-trigger'),
            t;
        switch (ev) {
            default:
                dd.on('mouseover mouseout', function(e){
                    $(cfg.ddclass).removeClass('show');
                    dd.toggleClass('show', (e.type == 'mouseover'));
                });
            break;
            case "click":
                dd.on('click', function(){
                    dd.toggleClass('show', !dd.hasClass('show'));
                });
                $(document).on('mouseup', function(e){
                    if (!dd.is(e.target) && dd.has(e.target).length === 0) {
                        dd.removeClass('show');
                    }
                });
                if (!dd.data('dropdown-persistent')) {
                    dd.on('mouseout', function(){
                        t = setTimeout(function(){
                            if (dd.is(':visible')) dd.removeClass('show');
                        }, cfg.delayout);
                    }).on('mouseover', function(){
                        if (t) clearTimeout(t);
                    });
                } 
            break;
        }
    };
    $('.dropdown').each(function(){
        $(this).dropdown('.dropdown');
    });
});

＆＃13;

span.demo {
    width:150px;
    margin:50px 0 0 50px;
}

span.dropdown {
-webkit-user-select: none;  
   -moz-user-select: none;    
    -ms-user-select: none;      
        user-select: none;
    position:relative;
    font-size:11px;
    display:block;
    color:#000;
    padding:5px;
    border-radius:2px;
    border:1px solid #FFF;
    font-family:'Open Sans', sans-serif;
    cursor:pointer;
}
span.dropdown.show {
    border:1px solid #CCC;
    cursor:default;
}
span.dropdown a {
    outline:0;
}
span.dropdown ul.list {
    display:none;
    position:absolute;
    top:23px;
    left:0;
    width:100%;
    background:#FFF;
    box-shadow:2px 2px 4px rgba(0,0,0,0.15);
    padding:0;
    margin:0;
    color:#000;
    list-style:none;
    border:1px solid #ccc;
    border-radius:3px;
    z-index:5;
}
span.dropdown.show ul.list {
    display:block;
}
span.dropdown ul.list li a {
    color:#31357F;
    display:block;
    float:none;
    margin:0;
    padding:5px;
    text-decoration:none;
    background:#FFF;
    text-align:left;
    margin:0;
}
span.dropdown ul.list li a:hover {
    color:#FFF;
    background:#217ba4;
}

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<span class="dropdown demo" data-dropdown-trigger="click"><i class="fa fa-caret-down"></i> 20 results per page
    <ul class="list">
        <li><a href="javascript:;">10 results</a></li>
        <li><a href="javascript:;">20 results</a></li>
        <li><a href="javascript:;">50 results</a></li>
        <li><a href="javascript:;">100 results</a></li>
    </ul>
</span>

＆＃13;

Answer 1

使用：

代替px值

span.dropdown ul.list {
    top:100%;
}

JSfiddle Demo

Answer 2

你真的不应该把div放在span里面，这是不正确的。但无论如何，你的问题的解决方案很简单，只需用span.dropdown ul.list中的100％替换25px

display:none;
position:absolute;
top:100%;
width:100%;
background:#FFF;
box-shadow:2px 2px 4px rgba(0,0,0,0.15);
padding:0;
margin:0;
color:#000;
list-style:none;
border:1px solid #ccc;
border-radius:3px;
z-index:5;

http://jsfiddle.net/odyuv7jd/2/

CSS下拉：子div顶部偏移与父高度相同？

2 个答案: