css - 与文本一致并位于文本顶部的下拉列表

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