创建一个只包含HTML& CSS？ [英] Creating a dropdown button with just HTML & CSS?

问题描述

可以创建一个带有下拉菜单的按钮，只需HTML& CSS？

Is it possible to create a button with a dropdown menu with just HTML & CSS?

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

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

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

When the link is clicked (hover is fine too, but click is preferred), I want ul#actions to show, where I can then chose my action. I tried to do something like this, but the menu (ul#actions) disappears when the cursor moves out of the button.

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

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

Do I need javascript/jquery to do something like this?

推荐答案

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

Try enclose it all in a div and put the hover on that 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/

这篇关于创建一个只包含HTML& CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！