與文本一致並在文本之上的下拉列表

Question

我有一個單詞可點擊的文本，點擊後文本的下拉列表應顯示在文本的頂部（文本保留在同一位置）。

我想使用div而不是無序列表，因爲我覺得他們更容易定位。但是，我接受各種解決方案。

HTML：

This is a sentence, with a 
<div class="dropdown-list"> 
    Clickable Word 
    <div>List Item 1</div> 
    <div>List Item 2</div> 
    <div>List Item 3</div> 
</div>. Plus some more text to fill the page. 

CSS：

.dropdown-list { 
    display: inline-block; 
} 

正如你可以在的jsfiddle http://jsfiddle.net/hLyaf/8/的div高度的變化看，並延伸，而不是在下降之上的整條生產線的高度，文本。

有沒有辦法達到預期的效果？

Answer 1

請使用本教程我有讓你

http://jsfiddle.net/hLyaf/12/

body { 
    font-size: 20px; 
} 
.dropdown-list { 
    display: inline-block !important; 
    background: #ccc; 
    position:relative; 
} 
.dropdown-list div.drop { 
    display: none; 
    width:100%; 
    position:absolute; 
    left:0; 
    top:100%;background: #ccc; 
}