html - 如何使用 CSS 设置 Ul Li 的样式以使其看起来像 "form"下拉列表？

Question

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

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

哪种 CSS 会使它看起来像“表单下拉菜单”？

我附上图片以明确我需要什么:

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

Answer 1

假设出于某种原因，您希望将其保留为列表。您需要的不仅仅是 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 以按照您想要的方式设置样式。主要是您需要将列表定位到框下方，然后显示:无。

.dropdown-emulator{
  position:relative;
}

.dropdown-emulator ul{
  position:absolute;
  top:25px;
  left:0;
}

第 3 步 - 创建一些 JavaScript 来捕获选择按钮的 onclick 事件以显示列表。

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