Стандартное меню wordpress сделать выпадающим

Функционал стандартного меню wordpress также как и возможности css вполне позволяют сделать выпадающие скрытые подменю. Весь в фокус в классах :hover и понимании того чего хочется добиться.

В wordpress есть присвоенные классы для практически любых позиций строк стандартного меню. Если нужно сделать выпадающее меню можно использовать

.sub-menu - ul список подменю
.current-menu-parent - родоначальник в данный момент выбранной строки меню
.current-menu-item - в данный момент выбранное меню

Для начала нужно совсем скрыть подменю:

.menu .sub-menu {display: none}

Далее сделать чтобы когда курсор мыши находится над пунктом меню (:hover) — подменю было видно.

.menu li:hover .sub-menu { display:block !important}

И сделать видимым ul список от родителя выбранного в данный момент пункта меню, то есть если выбран любой пункт подменю — то подменю будет видимо:

.current-menu-parent ul { display:block !important}

Раскрасить на свой вкус фон и цвет ссылок у выбранного пункта меню:

.menu .sub-menu a {padding-left:50px}
.current-menu-item { background: rgba(0,0,0,0.4)}
.current-menu-item a { color:#FFF}

Код полностью:


.menu .sub-menu {display: none}
.menu li:hover .sub-menu, .current-menu-parent ul { display:block !important}
.menu .sub-menu a {padding-left:50px}
.current-menu-item { background: rgba(0,0,0,0.5)}
.current-menu-item a { color:#FFF}