WordPressのドロップダウンメニューにスクロール機能を追加する

本日、あるクライアントの外国貿易向け独立サイトのメニューにスクロール機能を設定したので、記録として残します。WordPressでEコマースを行う外国貿易向け独立サイトでは、多くのThemeがスーパーメニューをサポートしており、その結果、特定のサブメニューの内容が非常に長くなり、表示に適さない場合があります。そのため、一定のピクセル数を超えたらスクロールバーを表示する機能を設定する必要があります。方法は簡単で、overflow-yパラメータを追加するだけです。

ul ul{
    max-height:500px;
    overflow-y:scroll;
}

例えば上記の例では、最大高さを500pxに設定し、overflow-yをスクロールに変更しています。overflow-yプロパティは、要素のコンテンツ領域をオーバーフローした場合に、上部/下部のエッジのコンテンツをクリップするかどうかを指定します。以下の値がサポートされています：

值	説明
visible	コンテンツを切り取らず、コンテンツボックスの外側に表示される可能性があります。
hidden	コンテンツを切り取る - スクロール機構を提供しません。
scroll	コンテンツのトリミング - スクロールメカニズムを提供します。
auto	ボックスからオーバーフローする場合は、スクロールメカニズムを提供する必要があります。
no-display	コンテンツがコンテンツボックスに適さない場合は、ボックス全体を削除します。
no-content	コンテンツがコンテンツボックスに適さない場合は、コンテンツ全体を非表示にします。