如何用CSS设计ULLi的样式,使其看起来像一个“表单”下拉列表?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (128)

我有一个有链接的ULLi,它们显示得像菜单一样。我想设置一个“下拉”列表,但像经典的“表单”选择器.-不是显示在悬停上的下拉菜单,而是一个可点击的菜单。

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

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

我附上图片来说明我需要什么:

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

提问于
用户回答回答于

假设,出于某种原因,你希望将其保留为列表。你需要的不仅仅是CSS。

步骤1-在HTML中,将列表放入一个,并添加一些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/

用户回答回答于

扫码关注云+社区

领取腾讯云代金券