ドロップダウンメニューの高さを変える。

2017/2/2（木）
表題の件。
ドロップダウンメニュー、プルダウンメニューとも呼ばれている。
自分のWebサイトにもついています。

赤線で囲んだ部分です。
この高さを変えたい。
調べたのですが出てこない。
自己解決しかないようで。
いろいろ試しました。
この部分のCSS

高さは「auto」にしています。
画面の幅が狭い場合は高さが高くなうようにです。

レスポンシブルってやつです。

ではやってみた結果を。

レスポンシブルは捨てて高さを「40px」に指定。
すると。

高さは高くなりましたが文字の位置が気に入りません。
これを変えようとしたのですが出来ない。

そこで入っている文字の上下の幅を変えてみます。

赤線で赤込んだ「padding」で文字の隙間を上・右・下・左に指定して入れられます。
この場合は、上　10px、下　10px。
左右はなし。
結果は・・・

ドロップダウンメニューの子メニューが開きっぱなし。
これから先は色々いじってもダメダメでした。

ふと気がついてやってみたことは。

文字の間隔を指定する「line-heugft」を「280％」、通常の2.8倍に指定してみました。

出来ました！
この「280%」の指定は色々やった結果です。
はじめは500％で指定して変化の結果がすぐに分かるようにしてから調整しました。
ついでに文字の太さを調整。

青線で囲んだ「font-weight」が太さの指定です。
500を600に変更です。
結果は

このようになりました。
数字を550にしても560にしても変化はしませんでした。
結果「600」に。

今の状態です。

※ドロップダウンメニューの参考サイト
　「CSSだけでドロップダウンメニュー」
　これから考えるドロップダウンメニューは
　「レスポンシブルWebデザインに対応したメニューの作り方｛追記あり｝」