javascript - 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 が必要ですか?

score 10 · Accepted Answer

すべてを 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;
}

javascript - HTML と CSS だけでドロップダウン ボタンを作成しますか?