stinger5にドロップダウンメニューをcssのみでつける
2018/11/26
いろいろ探したのですが、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; }
関連記事
-
-
女性にとって自宅で脱毛するメリットは?
業界最高クラスの光パワー搭載【LAVIE】 サマーキャンペーン開催中8/31まで …
-
-
さくらサーバーにWordPressをインストール
ついにさくらサーバーにWordPressをインストールしてみました。 かなり簡単 …
-
-
stinger5メニューをCSSのみ変更でドロップダウンで表示する!
Stinger5 をCSSのみで多階層ドロップダウンメニューにする方法【Word …
-
-
Contact Form 7で自動返信メールWordPress
自動返信メールはおくれますか? こちらのサイトにも書いてあるとおり、“メール ( …
-
-
プラグイン「Favicon by RealFaviconGenerator」でファビコン設置
プラグイン「Favicon by RealFaviconGenerator」でフ …
-
-
日本エレキテル連合、錦糸町に来る!
11月9日に来るそうです。 スマホから、wordpressのアプリで 初投稿! …
-
-
アドセンスで「保留中の自動支払い」
2018年11月のアドセンスの支払いが、「保留中の自動支払い」になってしまいまし …
-
-
ウーマンラッシュアワー、中川パラダイスさんにオファー!
整体のモニターのオファーをしてみました。 芸能人の方に直接オファーする機会などな …
-
-
Crayon Syntax Highlighter文字化け
どうやらphpのバージョンなどでエラーのなってしまうようです。 他のサイトを見て …
-
-
stinger5でサイドバーのnewpostを消す!
stinger5でサイドバー部分のnewpostを消す! こちらのブログを参考に …
- PREV
- stinger5でサイドバーのnewpostを消す!
- NEXT
- 妊婦の虫歯