我有一个可以单击一个单词的文本,单击该文本后,项目的下拉列表应出现在文本顶部(文本停留在同一位置)。

我当时在考虑使用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/中所见,divs的高度会改变并扩展整行的高度,而不是放在文本顶部。

有什么方法可以达到预期的效果吗?

最佳答案

请使用我为您制作的本教程

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

08-25 17:07
查看更多