只使用HTML和CSS如何创建下拉菜单按钮？

Question

是否可能仅使用HTML和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来完成这样的操作吗？

- Prabhu

---

不确定你要做什么，但是可以尝试这个：#TakeAction:hover + ul#actions, ul#actions:hover - user1932079

请查看http://cssmenumaker.com/或http://www.cssmenubuilder.com/home或http://purecssmenu.com/。 - lukeocom

Answer 1

尝试将所有内容都放在一个 div 中，然后将 hover 放在该 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/

- Dan P.

---

谢谢。有没有办法将它改为onclick而不是hover？ - Prabhu

谢谢，这正是我在寻找的，但是，jsFiddle代码存在一个问题，如果您能帮忙解决一下...即使我在菜单外面点击，它仍然保持打开状态。 - Prabhu

你不想使用JavaScript的原因是什么？ - Dan P.

一点点 JavaScript 没问题。我在网上看到很多 jQuery 和 JavaScript 的解决方案，但不想处理那么多代码。但是一点点是可以的... - Prabhu

Answer 2

您可以使用HTML Select标签。

这是我的解决方案。 Fiddle:带有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;
}

我希望这可以帮到你。

- RyanskyHeisenberg

---

为什么你要使用内联样式？问题要求使用CSS，因为这是问题的要求；“是否可以使用HTML和CSS完成”。此外，除了构建HTML电子邮件时，内联样式基本上是不可取的。 - zik

有趣的方法来隐藏占位符项目。 - ThorSummoner