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

【问题标题】：How to Style a Ul Li with CSS to make it look like a "form" dropdown list?如何使用 CSS 为 Ul Li 设置样式以使其看起来像“表单”下拉列表？
【发布时间】：2014-02-04 13:42:24
【问题描述】：

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

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

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

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

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

【问题讨论】：

查看本教程：tympanus.net/codrops/2012/10/04/custom-drop-down-list-styling

标签： html css drop-down-menu

【解决方案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/

【讨论】：

【解决方案2】：

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

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

或者。

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

【讨论】：

警惕 w3fools :P
@berkeleybross - 在这种情况下，OP 似乎对 Web 开发来说相对较新。虽然我通常*会直接参考 w3c，但在这种情况下，这些信息可能是压倒性的。因此，我决定将此资源作为链接提供。 * 以专业身份

【解决方案3】：

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

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

【讨论】：