いろいろ探したのですが、CSSのみで変更できるので、こちらのサイトを参考にさせていただきました!
Stinger5 をCSSのみで多階層ドロップダウンメニューにする方法【WordPress】
こちらのページもあるようにこのサイトの不具合はまさにこれでした。
その時の不具合はドロップダウンメニューは表示されるものの、表示されたドロップダウンの部分の方にカーソルを移動すると(下に移動すると)、メニューが消えてしまうというものでした。
これはメニューとメニューの間に隙間があるのが原因なので、下のようにmargin-top を調整すればOKです。
その時は margin-top を53px から 50px にしたらうまく行きました。
下のドロップダウンメニューCSSの24行目を下記のように53px→50pxにしたら解決
.smanone .sub-menu { margin-top: 50px; }
ドロップダウンメニューCSS
/* dropdown menu */ .smanone .menu-item { display: inline-block; text-align: left; padding: 0; } .smanone a { display: block; padding: 15px; position: relative; } .smanone .sub-menu { left: -9999px; opacity: 0; position: absolute; -webkit-transition: opacity .5s ease-in-out; -moz-transition: opacity .5s ease-in-out; -ms-transition: opacity .5s ease-in-out; -o-transition: opacity .5s ease-in-out; transition: opacity .5s ease-in-out; width: 200px; z-index: 99; margin-top: 53px; } .smanone .menu > li:hover .sub-menu a, .smanone .sub-menu a { background: #fff; position: relative; width: 200px; } .smanone .menu-item:hover > .sub-menu { left: auto; opacity: 1; } .smanone .sub-menu .sub-menu { margin: 0px 0 0 230px; } .smanone .menu > li:hover .sub-menu a:hover, .smanone .sub-menu a:hover { background: #eee; } .smanone a { padding: 15px; }
コメント