質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

3916閲覧

プルダウンメニューが画像に隠れる

TKojima

総合スコア10

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/08/30 05:29

マウスオーバーするとプルダウンメニューが表示される仕組みをCSSで実装しましたが、
いくつか問題が発生しており、解決できません。

1.サブメニューが、その下に配置しているスライドショーに隠れてしまっているようで、
表示されません。

2.スライドショーはslickを使っています。
http://kenwheeler.github.io/slick/
左右の矢印が見えません。
また、スライドショーの下のドットが、異常に小さい気がします。

これらは何が原因でしょうか?
おしえていただけると助かります。
よろしくお願いいたします。

ソースは下記をご覧ください。

http://kojimac.net/test/

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

style.cssの154行目で、

css

1nav ul { 2overflow:hidden; 3}

が設定されていると思います。
これによって、その中で入れ子になっているサブメニューがはみ出した分は見えなくなっています。

ただこれを直しても、スライドショーのほうが要素が後に書かれているので上に重なってしまいます。
それを防ぐために、navと.slick-sliderの両方にz-indexの指定をして重なり順を指定する必要があります。

ドットが小さいのは、slick-theme.cssで指定されているとおりだと思います。
1,2,3の本来のテキストは

css

1font-size: 0; 2color: transparent;

の指定で非表示になっていますが、それ以外にドットらしいものを表示するためのスタイルが書かれていないように見えます。
間違って何か消してしまったり、または自分で何か指定しなければいけないclassなどを付け忘れているということはありませんか?

【追加】
質問を一つ忘れていました。
スライダーの左右のボタンは画面の外にはみ出してしまっています。
ドットもそうですが、指定を間違って消したり、自分で書き換えたりしてしまっていませんか?

投稿2016/08/30 05:40

編集2016/08/30 05:42
NatsumiOki

総合スコア1298

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

TKojima

2016/08/30 07:47

サブメニューについては、おかげさまで解決しました。 前回に続き、早急にアドバイスいただけて、本当にありがとうございます! 最初、ご指摘の通りz-indexで順序を指定したのですが状況が変わりませんでした。 その原因は、z-indexはpositionでrelativeかabsoluteを指定しないと 効かないということだったようです。 難しいですね・・・。 でもこれでまた一つ覚えることができました。 本当にありがとうございました。 スライダーのボタンとドットについてはこれから試してみます。 まずはお礼まで。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問