Engrave with!!
手彫り工房ブログ

カテゴリを追加したい！カラーミーショップのBit（無料テンプレート）で第三回目で修正

こんにちは。

第三回目でPC版ドロップリストを作ったのですが、ちょっと修正です。
このままでも使えなくはないのですが、スライドをクリックしてドロップリストがでてきてしまう、なんてことがあるので修正です。

opacity:0はクリックできます。

前回、opacity:0はクリックできない前提でプログラムしてました。
しかし、opacity:0は実際はクリックできます。
そこでz-indexで調整することにしました。

z-indexを3か所入れるだけ。

前回のcssに以下を追加・変更するだけです。
headdrop1にz-index:0
headdrop1:hoverにz-index:1;
.headdrophead:hover ~ .headdrop1にz-index:1;
これでOKです。

何が変わる？

前回のままだと、スライドをクリックしようとしたらドロップリストが出てくることがありました。
しかし、z-index:0;だとドロップリストはスライドより重なりが下になるので、出てくることはなくなります。



それでは。