如何使用CSS为Ul Li设置样式，使其看起来像“表单”下拉列表？

Question

我有一个带有某些链接的Ul Li，它们显示为菜单。 我想设置一个“下拉”列表，但要像经典的“表单”选择器一样...-不是悬停时显示的下拉菜单，而是可单击的菜单。

<ul>
<li>Option 1 </li>
<li>Option 2 </li>
</ul>

哪种CSS使其看起来像“表单下拉列表”？

我附上图片以明确说明我的需求：

http://i.stack.imgur.com/nNeoo.png

Answer 1

我想为此，您可能想使用一个字段，使用标签？

http://www.w3schools.com/tags/tag_select.asp

或者。

您可以在隐藏的div上触发jQuery可见性切换，单击该div即可显示下拉菜单的内容。

Answer 2

我相信您正在寻找的是下拉列表。 代替使用项目列表，而是使用选择标记。

<select id="mydropdown">
  <option value="Milk">Fresh Milk</option>
  <option value="Cheese">Old Cheese</option>
  <option value="Bread">Hot Bread</option>
</select>

Answer 3

假设由于某种原因，您希望将其保留为列表。 您不仅需要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来捕获选择按钮的onclick事件，以使列表出现。

有关非常基本的工作示例，请参见此处http://jsfiddle.net/q5SEF/3/