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

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

1 个答案: