CSS下拉列表：子div的顶部偏移量与父高度相同吗？

Question

I am working on a (CSS) dropdown menu, which consists of a span element (parent) and a ul inside of it (child, the actual dropdown). The parent is a relative positioned block element; the child has absolute positioning in order to be displayed beneath it's parent.

Now I need the child dropdown always to be shown below the parent. However, I'd rather not give the child a fixed top offset (ie. the height of the parent element). The child may have a variable height, I dont want to rely on a fixed height. Is there any way to do this without the need of additional Javascript?

The HTML looks like this:

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

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

I left the Javascript out, which takes care of toggeling the dropdown. You can check it out on Jsfiddle . Basically, I want to get rid of top: 23px in span.dropdown ul.list. Changing it to bottom:0; makes it drop over the 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

Instead of a px value use:

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

JSfiddle Demo

Answer 2

You really shouldn't place div inside span, it's incorrect. But anyway, the solution of your problem is simple, just replace 25px with 100% in span.dropdown ul.list

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/