質問: マウスオーバーするとプルダウンメニューが表示される仕組みをCSSで実装しましたが、 いくつか問題が発生しており、解決できません。 1.サブメニューが、その下に配置しているスライドショーに隠れてしまっているようで、 表示されません。 2.スライドショーはslickを使っています。 http://kenwheeler.github.io/slick/ 左右の矢印が見えません。 また、スライドショーの下のドットが、異常に小さい気がします。 これらは何が原因でしょうか? おしえていただけると助かります。 よろしくお願いいたします。 ソースは下記をご覧ください。 http://kojimac.net/test/
回答: style.cssの154行目で、 ``` nav ul { overflow:hidden; } ``` が設定されていると思います。 これによって、その中で入れ子になっているサブメニューがはみ出した分は見えなくなっています。 ただこれを直しても、スライドショーのほうが要素が後に書かれているので上に重なってしまいます。 それを防ぐために、navと.slick-sliderの両方にz-indexの指定をして重なり順を指定する必要があります。 ドットが小さいのは、slick-theme.cssで指定されているとおりだと思います。 1,2,3の本来のテキストは ``` font-size: 0; color: transparent; ``` の指定で非表示になっていますが、それ以外にドットらしいものを表示するためのスタイルが書かれていないように見えます。 間違って何か消してしまったり、または自分で何か指定しなければいけないclassなどを付け忘れているということはありませんか? 【追加】 質問を一つ忘れていました。 スライダーの左右のボタンは画面の外にはみ出してしまっています。 ドットもそうですが、指定を間違って消したり、自分で書き換えたりしてしまっていませんか?