垂直ドロップダウンメニューの作成方法

HTMLとCSSを使用した基本的な垂直ドロップダウンメニュー: まず、HTMLとCSSを使用して基本的な垂直ドロップダウンメニューを作成する方法を見てみましょう。

HTML:
<nav>
  <ul>
    <li><a href="#">メニュー1</a>
      <ul>
        <li><a href="#">サブメニュー1</a></li>
        <li><a href="#">サブメニュー2</a></li>
        <li><a href="#">サブメニュー3</a></li>
      </ul>
    </li>
    <li><a href="#">メニュー2</a></li>
    <li><a href="#">メニュー3</a></li>
  </ul>
</nav>
CSS:
nav ul ul {
  display: none;
}
nav ul li:hover > ul {
  display: inherit;
}

JavaScriptを使用したドロップダウンメニューの改善: JavaScriptを使用すると、垂直ドロップダウンメニューの動作を改善することができます。以下は、JavaScriptを追加してドロップダウンメニューを改善する例です。

HTML:
<nav>
  <ul>
    <li><a href="#">メニュー1</a>
      <ul>
        <li><a href="#">サブメニュー1</a></li>
        <li><a href="#">サブメニュー2</a></li>
        <li><a href="#">サブメニュー3</a></li>
      </ul>
    </li>
    <li><a href="#">メニュー2</a></li>
    <li><a href="#">メニュー3</a></li>
  </ul>
</nav>
CSS:
nav ul ul {
  display: none;
}
nav ul li:hover > ul {
  display: inherit;
}

JavaScript:
var dropdowns = document.querySelectorAll('nav > ul > li');

dropdowns.forEach(function(dropdown) {
  dropdown.addEventListener('mouseover', function() {
    this.querySelector('ul').style.display = 'block';
  });

  dropdown.addEventListener('mouseout', function() {
    this.querySelector('ul').style.display = 'none';
  });
});

フレームワークを使用したドロップダウンメニュー: 多くのフレームワーク（例: Bootstrap、Foundation）では、垂直ドロップダウンメニューを簡単に作成できるコンポーネントが提供されています。フレームワークを使用することで、ドロップダウンメニューの作成が迅速かつ簡単になります。

それぞれのフレームワークの公式ドキュメントやチュートリアルを参照して、詳細な手順とコード例を確認してください。

以上が、垂直ドロップダウンメニューの作成方法とコード例の一部です。これらの方法を使用して、自分のウェブサイトやプロジェクトに垂直ドロップダウンメニューを追加してみてください。