WordPress Snippet

ワードプレスをカスタマイズしよう

wp_nav_menu()のサブメニューをモアっと表示させる

/* Dropdown */
#access ul li ul,
#access ul li:hover ul ul,
#access ul ul li:hover ul ul,
#access ul ul ul li:hover ul ul,
#access ul ul ul ul li:hover ul ul {
 visibility:hidden;
 opacity:0;
 transition:visibility 0s linear 0.5s,opacity 0.5s linear;
 z-index: 9999;
}
#access ul li:hover ul,
#access ul ul li:hover ul,
#access ul ul ul li:hover ul,
#access ul ul ul ul li:hover ul,
#access ul ul ul ul ul li:hover ul {
 visibility:visible;
 opacity:1;
 transition-delay:0s;
}

sub-menuやchildrenは、display:none; hover時にdisplay:block;でコントロールされていることが多いと思いますが、
ここの部分をvisibilityに変更して、opecity:0 とopecity:1 でtransitionを追加すると、もぁっとできそうです。

ただし、visibilityとdisplayは、挙動が異なるので、使う場合は良く検証してください

[emulsion_relate_posts]