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

问题描述 投票:0回答:3

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

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

哪个CSS会让它看起来像一个“表单下拉列表”?

我附上图片以明确我需要的东西:

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

html css drop-down-menu
3个回答
0
投票

我想为此,你可能想使用一个字段,使用标签?

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

另外。

您可以在隐藏的div上触发jQuery可见性切换,这会在单击时显示下拉列表的内容。


0
投票

我相信你要找的是一个下拉选择。而不是使用项目列表使用选择标记。

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

0
投票

假设,出于某种原因,您希望将其保留为列表。你需要的不仅仅是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/

© www.soinside.com 2019 - 2024. All rights reserved.