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

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

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

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

解決済

3回答

1620閲覧

CSSのアコーディオンメニューの動作が不安定

yytop

総合スコア20

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

0クリップ

投稿2019/01/28 13:27

下記のようなマウスオーバーでアコーディオン表示される、グローバルメニューを作成しています。

マウスを下にずらしてサブメニューを選択しようとすると、かなりの確率でメニューが消えてしまいます。

(リンクがクリックできるのが、3回に1回くらいでしょうか)

http://yytop.ciao.jp/test190128/

アコーディオンメニューの表示位置やサイズを調整したり、z-indexを入れてみたりしたのですが、改善せず困っています。

まったくクリック出来ないのなら根本的に間違っているのでしょうが、何か不安定になっている要因が分かりましたら教えてくださいませ。m(__)m

HTML

1 <div id="global_nav"> 2 <ul> 3 <li> 4 <a href=""><img src="img/icon_top1.jpg" width=110px alt="" title=""></a> 5 <ul> 6 <li><a href="">submenu</a></li> 7 <li><a href="">submenu</a></li> 8 <li><a href="">submenu</a></li> 9 </ul> 10 </li> 11 <li> 12 <a href=""><img src="img/icon_top2.jpg" width=110px alt="" title=""></a> 13 <ul> 14 <li><a href="">submenu2</a></li> 15 <li><a href="">submenu2</a></li> 16 <li><a href="">submenu2</a></li> 17 </ul> 18 </li> 19 <li> 20 <a href=""><img src="img/icon_top3.jpg" width=110px alt="" title=""></a> 21 <ul> 22 <li><a href="">submenu3</a></li> 23 <li><a href="">submenu3</a></li> 24 <li><a href="">submenu3</a></li> 25 </ul> 26 </li> 27 <li> 28 <a href=""><img src="img/icon_top4.jpg" width=110px alt="" title=""></a> 29 <ul> 30 <li><a href="">submenu4</a></li> 31 <li><a href="">submenu4</a></li> 32 <li><a href="">submenu4</a></li> 33 </ul> 34 </li> 35 <li> 36 <a href=""><img src="img/icon_top5.jpg" width=110px alt="" title=""></a> 37 <ul> 38 <li><a href="">submenu5</a></li> 39 <li><a href="">submenu5</a></li> 40 <li><a href="">submenu5</a></li> 41 </ul> 42 </li> 43 <li> 44 <a href=""><img src="img/icon_top6.jpg" width=110px alt="" title=""></a> 45 <ul> 46 <li><a href="">submenu6</a></li> 47 <li><a href="">submenu6</a></li> 48 <li><a href="">submenu6</a></li> 49 </ul> 50 </li> 51 <li> 52 <a href=""><img src="img/icon_top7.jpg" width=110px alt="" title=""></a> 53 <ul> 54 <li><a href="">submenu7</a></li> 55 <li><a href="">submenu7</a></li> 56 <li><a href="">submenu7</a></li> 57 </ul> 58 </li> 59 <li> 60 <a href=""><img src="img/icon_top8.jpg" width=110px alt="" title=""></a> 61 <ul> 62 <li><a href="">submenu8</a></li> 63 <li><a href="">submenu8</a></li> 64 <li><a href="">submenu8</a></li> 65 </ul> 66 </li> 67 <li> 68 <a href=""><img src="img/icon_top9.jpg" width=110px alt="" title=""></a> 69 <ul> 70 <li><a href="">submenu9</a></li> 71 <li><a href="">submenu9</a></li> 72 <li><a href="">submenu9</a></li> 73 </ul> 74 </li> 75 </ul> 76 </div>

CSS

1#global_nav { 2 float: left; 3 width: 1030px; 4 margin: 20px 0 10px 0; 5 display:block; 6} 7#global_nav ul { 8 float: left; 9 width:100%; 10} 11 12#global_nav ul li { 13 float: left; 14 display:inline; 15 margin: 0 0px 0 0px; 16 color:#4D4D4D; 17 width:auto; 18} 19 20#global_nav ul li a { 21 float: left; 22 text-align: center; 23 text-indent: 0px; 24 padding:0 2px 0px 2px; 25 background-image: none; 26 background-repeat: no-repeat; 27 color:#4D4D4D; 28 width:auto; 29 font-size: 90%; 30} 31#global_nav a { 32 text-decoration: none; 33 color:#183218; 34} 35 36#global_nav a:hover { 37 color: #999; 38} 39 40#global_nav li > ul { 41 ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=99)"; 42 /* internet explorer 8 */ 43 background: #fff; 44 filter: alpha(opacity=99); 45 /* internet explorer 5~7 */ 46 visibility: hidden; 47 position: absolute; 48 margin-top: 113px; 49 margin-left: -40px; 50 display: block; 51 width: 190px!important; 52 background: rgba(255, 255, 255, 0.9); 53 z-index:100; 54} 55 56#global_nav li:last-child > ul { 57 width: 180px!important; 58} 59 60#global_nav li:hover > ul { 61 visibility: visible; 62} 63 64#global_nav li li { 65 position: relative; 66 width: 180px!important; 67} 68#global_nav li li:first-child { 69 border-top: none; 70} 71 72#global_nav li li:hover { 73 background: rgba(222, 231, 236, 0.7); 74 ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; 75 /* internet explorer 8 */ 76 background: #DEE7EC; 77 filter: alpha(opacity=70); 78 /* internet explorer 5~7 */ 79} 80 81#global_nav li li > a { 82 display: block; 83 padding: .75em 1.5em; 84 text-decoration: none; 85 color: #333; 86 background-image: none; 87 background-repeat: no-repeat; 88 background-position: 1em center; 89} 90 91#global_nav li li ul { 92 top: 0; 93 left: 100%; 94}

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

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

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

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

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

guest

回答3

0

ベストアンサー

実際にその箇所に要素がないと:hoverは効かないからです。

添付の画像のように、画像とリストの間にmarginで余白を取っているので、
margin-topは画像の高さ分だけ指定し、微妙な余白はpadding-topで指定すれば安定するはずです。

css

1#global_nav li > ul { 2 margin-top: 110px; 3 padding-top: 3px; 4}

イメージ説明

マウスを動かすスピードが速い時には、成功するはずです。

投稿2019/01/28 15:09

kszk311

総合スコア3404

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

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

yytop

2019/01/28 16:04

なるほど、そういうことでしたか、、やっと安定しました。ありがとうございます!m(__)m
guest

0

#global_nav li の領域と #global_nav li > ul の領域が3pxほど開いているので、落ちています。

投稿2019/01/28 15:06

kei344

総合スコア69357

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

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

yytop

2019/01/28 16:05

ありがとうございます。微妙なズレが原因でしたね。。
guest

0

検証無しの状態ですみませんが

css

1#global_nav ul li a

にdisplay:block;の指定が無いのが気になりました。
マウスをずらした時にhover判定が外れているのではないでしょうか。

投稿2019/01/28 13:34

MakotoOoka

総合スコア51

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

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

yytop

2019/01/28 13:53

早速のご回答ありがとうございます。 ご指摘の箇所と :hover が付いているところにも、一通り display:block; を入れてみましたが、相変わらず不安定なようです。。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問