ホバー時に表示されるドロップダウンメニューが途中で切れてしまいます。

Question

以下のリンク先のサイトのヘッダーのメニューにホバーするとドロップダウンメニューが表示されるのですが、ヘッダーの範囲内で表示が切れてしまって全部が表示できません。
ホバー時にドロップダウンメニューを全部表示させるにはどうすればよいでしょうか？

http://wonect.com/te/

不具合の原因
横の画面サイズが１２００px以下でヘッダー部分のレイアウトを保持するために横スクロールするようにするため以下のcssを設定しているから（スクロールバーは中の要素がはみ出る場合のみ出したい）

header {
    overflow-x: auto;
    overflow-y: hidden;
}

これにより、overflow-y: hidden;でヘッダーからはみ出した部分が非表示になっているようです。
画面が規定より小さくなった時に横スクロールさせる機能を保持したままでホバー時のドロップダウンメニューも表示させる方法はないでしょうか？

よろしくお願いします。

Answer 1

そう実装した理由と、不具合の原因までしっかり理解しているようですので、デザイナーから見た話をしますね。

スクロールバーが出る画面幅よりもさらに小さくしていくとモバイル用の表示に切り替わるレスポンシブになっているようですね。
せっかくレスポンシブにしているのに、なぜわざわざ横スクロールバーを出すのでしょうか？
ブレイクポイントに合わせた幅でそれぞれデザイン・コーディングするべきだと思うのです。

ユーザーからしてみてもわざわざ横スクロールってとても面倒くさいです。
実装云々よりも、サイトの設計に問題があると考えます。
（あえて端的に表現するなら、ダサいです）

幅をちゃんと設計していれば横スクロールする必要もなく、overflow-y:hidden;も必要なく、メニューが表示されて、ユーザーも余計な操作が必要ない、みんな幸せ！

という解決方法をおすすめしたいです。
まあここまでできあがっているのでデザインを変更するのは難しいと思いますが。

そこで妥協案として、

私なら・・・
もし横スクロールするのだとしたら、私ならコンテンツ全体の最小幅を固定して、ウィンドウを縮めた場合に右端が切れるのであればウィンドウ全体の横スクロールを使ってもらうようにします。

いや！商品がスクロールせずに見れないなんてダメだ！と言われるでしょうか？
それを言うなら、わざわざメニューが横スクロールのめんどくさいサイトで買い物なんかしないで離れていくユーザーの数も試算して比較検討するべきです。
そもそも「PCでこの微妙なウィンドウサイズにして見る人」のために、そこまでがんばるかなぁ…？

UI/UXデザイン、売り上げに直結しますよ。