CSS 下拉列表：child div 顶部偏移量与 parent 高度相同？

Question

我正在开发一个 (CSS) 下拉菜单，它由一个 span 元素 (parent) 和其中的一个 ul 组成（child，实际的下拉菜单） . parent 是一个相对定位的块元素； child 具有绝对定位，以便显示在其 parent.

下方

现在我需要 child 下拉列表始终显示在 parent 下方。但是，我宁愿不给 child 一个固定的顶部偏移量（即 parent 元素的高度）。 child 可能有可变高度，我不想依赖固定高度。有什么方法可以做到这一点而不需要额外的 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。将其更改为 bottom:0；让它落在 parent.

$(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');
    });
});

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

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

Answer 1

使用 px 值代替：

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

JSfiddle Demo

Answer 2

您真的不应该将 div 放在 span 中，这是不正确的。不过不管怎样，你的问题的解决方法很简单，只需将 span.dropdown ul.list

中的 25px 替换为 100% 即可

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 下拉列表：child div 顶部偏移量与 parent 高度相同？

CSS Dropdown: child div top offset same as parent height?

javascript

css

drop-down-menu