z-indexの、ブラウザ対応について教えてくださいm(__)m

Question

###■前提
・CSSでアコーディオンメニューを作りました。
・マウスホバーでポップアップが表示されます。
https://jsfiddle.net/s1qmnscw/2/

###■問題
上記のコードだと、firefoxとchromeで表示がズレてしまうんです。
たとえば、「おにぎり」のアコーディオンを開いて、「お米の炊き方」にマウスをあてると「水多めにしてべちゃべチャなお米が炊けるようにしましょう。」というポップアップが表示されます。

このポップアップが問題です。

firefoxならいいのですが、chromeではポップアップがアコーディオンよりも下に隠れてしまうのです。

###■質問
ポップアップを一番上に表示させるためにはどのように書けばいいのでしょうか？
CSS博士の方、どうぞよろしくお願いいたします。

Answer 1

overflow: hidden; によってa要素の領域範囲外が見切れているのが原因のようです。
z-index は削除して問題ありません。

.accordion li a {
   display: table;
   margin-top: 1px;
   padding: 12px 10px;
   width: 100%;
   background: #4285F4; 
   text-decoration: none;
   text-align: left;
   color: #FFF;
   overflow: hidden;  /* この行を削除する */
}

Re: matsuzakaq さん

Comments

[退会済みユーザー]

To: thin49さん
おはようございます。
いつもありがとうございます。

仰るようにしたら、こうなってしまいました。
https://jsfiddle.net/s1qmnscw/4/

ポップアップが、マウスホバーせずにも表示されてしまいました。(>_<)

[退会済みユーザー]

To: think49さん
上のコメントの訂正です。
＞ポップアップが、
ではなく、
＞アコーディオンの中身が、
でしたね。m(__)m

[think49]

正直なところ、そうなることは分かっていました。
分かった上で質問された現象の原因がはっきりしたので自力で解決することを期待していました。
- 「overflow: hidden;」がなぜ必要なのか
- hoverしたら「overflow」の値が何であるべきなのか
を考えてトライアンドエラーを繰り返せば解決するはずです(手元の環境では修正できました)。

(蛇足)
下記URLからコピペしたスタイルと推察しますが、いろいろと無駄が多いのでこれを参考にするのはお勧めはしません。
a要素は不要ですし、子セレクタを使えばもっとすっきりしますし、ul要素ではなく、dl要素を使えばすっきりかける、とかul要素を使うならh1,h2系要素を使うとか、いろいろ。
http://ri-mode.com/rainbow/2014/11/20/css_accordion_menu-2/

[退会済みユーザー]

これは失礼いたしました。
もしかして、いやそうだろうな、とは、実は思っておりました。相手が相手ですからね。笑
でも、私の不徳の致すところ、と申しましょうか。あきらかに甘えだけが１００％であったと、今思い返して自覚しております。すみません。
だって、お魚の釣り方って、覚えるの大変なんですもの。。笑

ちょっと今から取り組んでみます。m(__)m

[退会済みユーザー]

自分で解決できたら、仰っている「もっとすっきり版」も教えてください！笑
さて、と。やるぞ…( ｀ー´)ノ

[退会済みユーザー]

yeaaaaah!!!!!!!!!!!!!!!

.accordion li li a:hover {
overflow: visible;
}

この達成感…
取り組んでみてよかったです。
しかもコメントにあるヒントがまた素敵です。
liとかulさえわかりませんでしたから笑、かなり勉強になりました。
それでは！おやすみなさい！
どうもありがとうございます！！！！！