Несколько ранее выложил видео урок о том, как создать выпадающее меню на HTML и CSS. Сейчас я напишу как создать горизонтальное выпадающее меню на WordPress сайте. Кстати, если ваша тема не поддерживает меню, то вы можете добавить произвольное меню в WordPress тему самостоятельно.
Создаем структуру WordPress меню
Для того, чтобы меню было выпадающим, необходимо создать иерархическую структуру ссылок. Для этого заходим в админку WordPress и переходим на вкладку "Дизайн - Меню". На этой странице нужно создать меню с вложенными друг в друга ссылками. Пример на картинке ниже.
Теперь пункты нашего WordPress меню имеют иерархию, что необходимо для выпадающего меню.
CSS код выпадающего WordPress меню
Меню в вашем шаблоне выводится с помощью PHP кода:
<?php wp_nav_menu(); ?>
Вам необходимо найти этот кусок кода в вашей теме (обычно он располагается в файле header.php), и заключить его в див следующим образом:
<div id="main_menu" role="navigation"><?php wp_nav_menu(); ?></div>
Теперь вам осталось добавить следующий CSS код выпадающего меню в файл style.css и у вас все должно заработать:
/* =Menu -------------------------------------------------------------- */ #main_menu { clear: both; font-size: 11pt; height: 20px; padding: 14px 0px; overflow: hidden; background: #45aeff; border: 1px solid #bce2ff; border-bottom: none; border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; } #main_menu ul { clear: both; margin: 0; padding: 0px; } #main_menu ul li { float: left; list-style: none; padding: 0 10px; } #main_menu a { color: #fff; padding: 0 10px; text-decoration: none; } #main_menu .sub-menu { display: none; position: absolute; margin: 0; padding: 10px !important; border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; -webkit-border-radius: 0 0 4px 4px; z-index: 999999; } #main_menu ul li:hover .sub-menu { display: block; clear: both; position: absolute; background: #45aeff; } #main_menu .sub-menu li { clear: both; } #main_menu a:hover { text-decoration: underline; }
У вас должно получиться что-то наподобие вот такого симпатичного меню :)
С кодом CSS рекомендую поработать самостоятельно и поправить выпадающее меню под стиль вашего сайта.