如何使用CSS设置Ul的样式，使其看起来像一个“表单”下拉列表？
如何使用CSS设置Ul的样式，使其看起来像一个“表单”下拉列表？
提问于 2014-02-04 21:42:24
我有一个带有一些链接的Ul Li，它们像一个菜单一样显示。我想设置一个“下拉列表”，但就像经典的“表单”选择器一样……-not显示悬停状态的下拉菜单，但可单击菜单。
<ul>
<li>Option 1 </li>
<li>Option 2 </li>
</ul>哪种CSS会让它看起来像一个“表单下拉列表”？
我附上图像是为了清楚地表明我需要什么：
回答 3
Stack Overflow用户
发布于 2014-02-04 23:19:04
假设，出于某种原因，您希望将其保留为列表。你需要的不仅仅是CSS。
步骤1-在HTML中，将列表放入a中，并将一些HTML添加到样式中作为选择框。例如：
<div class="dropdown-emulator">
<div class="dropdown-emulator-selected"></div>
<a href="#" class="dropdown-emulator-select-btn">v</a>
<ul>
<li>Option 1 </li>
<li>Option 2 </li>
</ul>
</div>第2步-添加CSS以按照您所需的方式设置样式。主要是将列表放在框的下方，然后显示:none。
.dropdown-emulator{
position:relative;
}
.dropdown-emulator ul{
position:absolute;
top:25px;
left:0;
}步骤3-创建一些JavaScript来捕获select按钮的onclick事件，以显示列表。
有关非常基本的工作示例，请参阅此处的http://jsfiddle.net/q5SEF/3/
Stack Overflow用户
发布于 2014-02-04 21:46:19
我想，您可能想使用一个字段，使用标记？
http://www.w3schools.com/tags/tag_select.asp
另一种选择。
您可以在一个隐藏的div上触发一个jQuery可见性切换，当它被点击时，它将显示您的下拉列表的内容。
Stack Overflow用户
发布于 2014-02-04 21:46:19
我相信你正在寻找的是一个下拉式选择。而不是具有项目列表，而使用选择标签。
<select id="mydropdown">
<option value="Milk">Fresh Milk</option>
<option value="Cheese">Old Cheese</option>
<option value="Bread">Hot Bread</option>
</select>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21554184
复制相关文章
相似问题
腾讯云开发者
