Question

是否可以创建一个带有下拉菜单的按钮，只需HTML＆amp; CSS？

<a id="TakeAction">Take Action</a>

<ul id="actions">
  <li>action 1</li>
  <li>action 2</li>
   ...
</ul>

点击链接时（悬停也很好，但首选点击），我想要显示ul＃actions，然后我可以选择我的操作。我尝试做这样的事情，但当光标移出按钮时菜单（ul＃actions）消失。

ul#actions
{
    display:none;
}
#TakeAction:hover + ul#actions
{
    display: block;
}

我需要javascript / jquery来做这样的事吗？

Answer 1

尝试将它全部包含在div中并将悬停放在该div上：

HTML：

<div class="actions">
  <a id="TakeAction">Take Action</a>
  <ul id="actions">
    <li>action 1</li>
    <li>action 2</li>
  </ul>
</div>

CSS：

ul#actions
{
    display:none;
}
.actions:hover ul#actions
{
    display: block;
}

悬停时：http://jsfiddle.net/gpf5n/

点击：http://jsfiddle.net/5p2SQ/

Answer 2

您可以使用HTML Select Tag。

这是我的解决方案。 Fiddle: Dropdown button with CSS

HTML

<select name='takeation'>
  <option class='head'>Select Action</option>
  <option value='Action 1'>Action 1</option>
  <option value='Action 2'>Action 2</option>
  <option value='Action 3'>Action 3</option>
</select>

CSS

option.head {
  selected:selected;
  display:none;
  disabled:disabled;
}

我希望这会有所帮助。

仅使用HTML＆amp;创建一个下拉按钮CSS？

2 个答案: