Affingerのメニューをドロップダウン表示にカスタマイズする方法

話題のWordPress用テーマ「Affinger」ですが、同じ作者の「Stinger」同様デフォルトでドロップダウンメニューに対応していません。
しかもそれまでのバージョンの「Stinger」や「Affinger」と同時リリースされた「Stinger6」とCSSの内容が微妙に違うので「Stinger」用のカスタマイズが使えなかったりします。

ということで、なるべくデフォルトのデザインの印象を壊さず「Affinger」のナビゲーションメニューをドロップダウン表示に対応させるCSSを作ってみたので公開します。

ドロップダウンメニュー表示用CSS

CSSを「Style.css」に追加することでドロップダウンメニューになります。
追加する場所は「Style.css」の1790行目あたり。

/*media Queries PCサイズ
----------------------------------------------------*/
@media only screen and (min-width: 781px) {

この下に以下のCSSをコピペして追加してください。

/* Drop Down Menu for Affinger2 */

.smanone .menu-item {
display: inline-block;
text-align: left;
border: none;
padding: 0px;
}

.smanone a {
display: block;
position: relative;
border-left: 1px dotted #ccc;
line-height: 1.3;
}

.smanone .sub-menu {
left: -9999px;
opacity: 0;
position: absolute;
-webkit-transition: opacity .2s ease-in-out;
-moz-transition: opacity .2s ease-in-out;
-ms-transition: opacity .2s ease-in-out;
-o-transition: opacity .2s ease-in-out;
transition: opacity .2s ease-in-out;
width: 150px;
z-index: 99;
margin-top: 30px;
}
.smanone .menu > li:hover .sub-menu a, .smanone .sub-menu a {
background: #f3f3f3;
position: relative;
width: 150px;
}

.smanone .menu-item:hover > .sub-menu {
left: auto;
opacity: 1;
}

.smanone a {
padding: 7px 10px;
}

.smanone li:first-child a {
border: none;
padding: 7px 10px 7px 0;
}

.smanone .sub-menu li:first-child a {
padding: 7px 10px;
}

.acordion_tree li {
width: 100%;
}

nav {
padding: 0;
margin: 10px 0;
}

nav.smanone .sub-menu li a {
border-top: 1px dotted #ccc;
border-left: 1px dotted #ccc;
border-right: 1px dotted #ccc;
}

nav.smanone .sub-menu li:last-child a {
border-bottom: 1px dotted #ccc;
}

これでメニューがドロップダウン表示されるようになるはずです。
デザインの変更などはお好みでどうぞ。

もし表示の乱れなどがありましたら、コメント欄で教えてください。
時間があるときに対応するかもしれません。