下記のようなマウスオーバーでアコーディオン表示される、グローバルメニューを作成しています。
マウスを下にずらしてサブメニューを選択しようとすると、かなりの確率でメニューが消えてしまいます。
(リンクがクリックできるのが、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}
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/01/28 16:04