javascript - CSS 下拉菜单 : child div top offset same as parent height?

Question

我正在开发一个 (CSS) 下拉菜单，它由一个 span 元素(父元素)和其中的一个 ul(子元素，实际的下拉菜单)组成。父级是一个相对定位的 block 元素；子项具有绝对定位，以便显示在其父项下方。

现在我需要子下拉列表始终显示在父项下方。但是，我宁愿不给 child 一个固定的顶部偏移量(即父元素的高度)。 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