こんにちは！ぬぁるです。
以前、↓の記事で、プルダウンメニューをulタグで作成する方法を紹介しました。
その時はpaddingの調整で作成したのですが、実はその方法だと簡単な反面、
以下の画像のように、枠線が思うように設定できず、調整が難しい場合があります。
この辺り、CSSのpositionプロパティを使うことで解決できますので、
そのやり方をこの記事ではご紹介したいと思います。
作り方
positionプロパティの指定
先ほどご紹介した記事の「4.幅とマージンを整える」までは同じです。
そこから、外側のul直下のliに対して、position: relative;を指定します。
さらに、プルダウンメニューとなるulに対して、position: absolute;を指定します。
<ul style="list-style: none; padding: 0; border: solid 1px grey;">
<li style=“position: relative;”><p>選択された値が入る箇所</p>
<ul style="position: absolute; list-style: none; padding: 0; border-top: solid 1px grey;">
<li>テスト項目1</li>
<li>テスト項目2</li>
<li>テスト項目3</li>
</ul>
</li>
</ul>height, width, top, leftプロパティを指定
position: absolute;を指定したulに対して、height, width, top, leftプロパティを指定していきます。
heightとwidthを指定してあげないと、正しく表示されませんので指定しましょう。
widthは100%と指定してあげることで、幅が揃います。
topとleftも、丁度いい位置にプルダウンメニューが表示されるように、ブラウザで確認しながら調整しましょう。
ブラウザの開発者ツールで確認・調整して、決まったらソースコードに反映、という手順を踏むと効率が良いかと思います。
開発者ツールの使い方は、個人的には以下の記事が参考になると思います。
borderやoverflowプロパティを指定
プルダウンメニューをスクロールさせたい場合は
プルダウンメニューとなるulに対して「orverflow-y: scroll;」を指定すればOKです。
以下のように、丸っこいデザインにしたい場合も、
それぞれにborder-radiusプロパティを指定すれば簡単に実現できます。
（以下の画像では、border-raidusを5pxとしています）
こんな感じでオリジナルのプルダウンメニューが作れますので、是非皆さんも試してみてください！！
