Как сделать для wordpress выпадающее меню?

Почему не получается создать выпадающее меню в WordPress

Если вы создаёте выпадающее меню по описанной инструкции, но у вас оно не получается, то тому может быть несколько причин:

Для начала убедитесь, что нужные пункты действительно стали выпадающими. На этих пунктах меню должно быть написано «Дочерний элемент», как на скриншотах выше.
Помните, что если сделать дочерние рубрики или страницы и просто добавить их в меню, не передвигая пункты вправо, в самом меню эти элементы дочерними не станут.
Попробуйте переключить меню на другую область отображения. Возможно, что выбранная текущая область отображения не поддерживает выпадающие пункты.
Есть такие темы, в которых нет ни одной области выпадающего меню.
Также некоторые темы могут поддерживать только один уровень вложенности выпадающих пунктов, тогда более глубокие пункты отображаться не будут.
В некоторых темах для вызова выпадающего меню нужно не просто навести мышку на родительский пункт, а кликнуть на него.

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

И последний совет — не делайте слишком сложную навигацию, стремитесь к простоте.

Фиксированное меню с jQuery и CSS

Второй пример чуть более сложный — с применением библиотеки jQuery. Она встречается на многих сайтах, плюс в большинстве шаблонов WordPress и других CMS подключена изначально. Из Javascript функций здесь используется всего 2, поэтому данное решение можно считать достаточно легким по сравнению с некоторыми другими из интернета. Вот что в итоге должно получиться:

Алгоритм внедрения данного фиксированного меню с jQuery состоит из трех шагов. Первым делом добавляем HTML код:

<div class="nav-container">
<div class="nav">
	<ul>
		<li><a href="">Home</a></li>
		<li><a href="">CSS</a></li>
		<li><a href="">PHP</a></li>
		<li><a href="">SEO</a></li>
		<li><a href="">jQuery</a></li>
		<li><a href="">Wordpress</a></li>
		<li><a href="">Services</a></li>
	</ul>
	<div class="clear"></div> /*clear floating div*/
</div>
</div>

Если вы хотите внедрить данный метод на уже готовое собственное меню, тут 2 пути: либо в CSS и JS ниже подставляете свои стили, либо подгоняете имеющийся HTML под вариант сверху.

В стилях размещаете следующие строки:

.nav-container{ background url('images/nav_bg.jpg') repeat-x  ;}
.f-nav{ z-index 9999; position fixed; left ; top ; width 100%;} 
 
.nav { height 42px;}
	.nav ul { list-style none; }
	.nav ul li{float left; margin-top 6px; padding 6px; border-right 1px solid #ACACAC;}
	.nav ul lifirst-child{ padding-left ;}
	.nav ul li a { }
	.nav ul li ahover{ text-decoration underline;}

Кроме непосредственно фиксации меню при прокрутке есть CSS для размещение ссылок в одну строку.

jQuery("document").ready(function($){
 
	var nav = $('.nav-container');
 
	$(window).scroll(function () {
		if ($(this).scrollTop() > 136) {
			nav.addClass("f-nav");
		} else {
			nav.removeClass("f-nav");
		}
	});
 
});

Логика работы функций следующая — когда пользователь находится или прокручивает страницу ниже 136 пикселей сверху, то для меню добавляется класс f-nav, а в нем прописаны знакомые нам position:fixed и top:0.

Значение в 136 пикселей можно менять в зависимости от вашего дизайна. Кроме того, если вы интегрируете данный пример в свое готовое горизонтальное фиксированное меню на сайте, то указывайте соответствующие значения классов в JS и CSS. Если у вас возникли какие-то нюансы с реализацией кода, загляните в комментарии к оригинальной статье — там есть парочка подсказок.

Напоследок предлагаю ознакомиться с еще одним вариантом реализации нашей задачи. Не буду особо детализировать его, просто размещаю вставку из онлайн редактора кода Codepen.

Добавление меню на ваш сайт

Если ваша текущая тема поддерживает настраиваемые меню, вы сможете добавить новое меню в одну из Область отображения.

Прокрутите вниз окно редактора меню.
В разделе Область отображения установите флажок для того места, где вы хотите разместить свое меню.
Нажмите на кнопку Сохранить меню чтобы сохранить изменения.

Если ваша текущая тема не поддерживает настраиваемые меню, вам нужно будет добавить новое меню через виджет «Пользовательское меню» в разделе виджетов.

После того, как элемент добавлен в меню, эти элементы меню можно изменить. Поместив курсор мыши на заголовок пункта меню, когда курсор мыши изменится на 4 стрелки, удерживайте левую кнопку мыши нажатой, перетащите модуль в то место, где вы хотите его разместить, затем отпустите кнопку мыши (это называется перетаскиванием). Помните, что вы можете перетащить элемент меню немного вправо от элемента меню над ним, чтобы создать иерархические отношения (родительский/дочерний) в меню.

У каждого пункта меню есть стрелка конфигурации справа от заголовка пункта меню, при нажатии на которую открывается окно конфигурации. Кликните на стрелку второй раз, чтобы закрыть окно конфигурации. Если вы не видите «Цель ссылки», «Классы CSS», «Отношение к ссылке (XFN))» и «Описание», то в разделе убедитесь, что эти флажки установлены, чтобы их можно было здесь увидеть.

Затем выбор конфигурации:

Текст ссылки

Текст для этого конкретного пункта меню

Атрибут заголовка

Атрибут, используемый при отображении метки

Открывать в новой вкладке

Отметте флажком, если вы хотите, что бы страница открывалась в новом окне.

Классы CSS (необязательно)

Классы CSS для этого пункта меню

Отношение к ссылке (XFN)

Позволяет автоматически создавать атрибуты XFN, чтобы вы могли показать, как вы связаны с авторами/владельцами сайта, на который вы ссылаетесь.

Описание

Описание будет отображаться в меню, если текущая тема его поддерживает.

Удалить

Удалить этот пункт из меню.

Отмена

Отмените настройку пункта меню

Шаг 1: Создание и определение параметров меню

Для начала нужно открыть файл и в соответствующем блоке, в котором будет находится будущее меню, добавить функцию отображения меню с набором аргументов определённых в массиве .

header.php

PHP

<div class=»menu»>
<?php
$args = array(
‘theme_location’ => ‘primary_menu’, //определяем область темы где будет размещаться главное меню
‘container’ => ‘nav’, //определяем родительский элемент (тег <nav>)
‘container_class’ => ‘nav-primary-menu’, //назначаем имя класса для родительского элемента (тег <nav>)
‘menu_class’ => ‘ul-primary-menu’ //назначаем имя класса для меню (тег <ul>)
);

wp_nav_menu($args); //обеспечивает отображение меню
?>
</div>

<!—…—>
</header>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!—…—>

<?php

$args=array(

‘theme_location’=>’primary_menu’,//определяем область темы где будет размещаться главное меню

‘container’=>’nav’,//определяем родительский элемент (тег <nav>)

‘container_class’=>’nav-primary-menu’,//назначаем имя класса для родительского элемента (тег <nav>)

‘menu_class’=>’ul-primary-menu’//назначаем имя класса для меню (тег <ul>)

);

wp_nav_menu($args);//обеспечивает отображение меню

<div>

<!—…—>

Помимо приведенных выше параметров, существуют также и другие параметры, которые при необходимости, можно добавить в массив.

Все доступные параметры меню приведены в таблице в конце статьи.

Использование CSS3 анимации

transition
.menu {
  background: #000;
  border: 1px solid #666;
  border-radius: 3px;
  height: 40px;
}
.menu li {
  position: relative;
  float: left;
  height: 40px;
  overflow: hidden;
}
/*ссылки*/
.menu li a {
  display: block;
  padding: 0 5px;
  margin: 3px;
  font: normal normal 14px/28px Tahoma, sans-serif;
  color: #FFF;
}
.menu li:hover > a {
   background: #0C6;
}
.menu ul {  position: absolute;
  background: #666;
  border: 1px solid #999;/*установленные начальные параметры*/
  width: 0px;
  opacity: ;/*параметры применяемой анимации*/
  -webkit-transition: all .25s ease .1s;
  -moz-transition: all .25s ease .1s;
  -o-transition: all .25s ease .1s;
  -ms-transition: all .25s ease .1s;
  transition: all .25s ease .1s;
}.menu li:hover {
  overflow: visible;
}/*приобретаемые параметры при наведении на родителя*/
.menu li:hover > ul {
  opacity: 1;
  width: 150px;
}.menu ul {
  left: 0;
  top: 100%;
}
.menu li ul li ul{
  left: 100%;
  top: 0%;
}

Параметры для свойства transition задаются в следующем порядке:
[свойство|продолжительность анимации|тип анимации|пауза перед выполнением]
Например: ~~transition~~: height 1s easy-in .5s; Что на словах можно истолковать как: плавно изменить высоту элемента, в течении 1 секунды, ускоряясь в завершении, начав анимацию с паузой в полсекунды.
Значении all указывает что анимация должна воздействовать на все доступные свойства.
http://magentawave.com

Демо-версия

Ниже приведена ссылка на скачивание ZIP-архива, который содержит все необходимые для этой статьи коды.

Демо-версия: Выпадающее меню для WordPress — Версия 1.0 (3 кБ ZIP)

Создаем меню в WordPress

WordPress 3 имеет простой в использовании drag-and-drop интерфейс для создания структуры меню. Если вы еще не работали с меню, чтобы создать и сохранить пользовательское меню, перейдите Внешний вид > Меню. Задайте для меню название и сохраните его:

Добавление пользовательского Walker-класса в functions.php

Прежде, чем мы сможем вывести меню в файле темы WordPress, нам нужно добавить Walker-класс WordPress в файл functions.php.

Этот код «очистит» выводимую HTML-разметку нашего меню, чтобы мы могли легко создавать CSS. Скопируйте и вставьте код класса Walker в файл functions.php, который располагается в папке темы. Если файл functions.php не существует, создайте его, а затем вставьте в него код класса:

Вывод меню через файл темы

Теперь у нас есть созданное меню и размещенный класс Walker. Пришло время вывести наше меню через файл темы. Для этого мы используем функцию wp_nav_menu(). С помощью PHP мы вызовем эту функцию и передадим ей параметры нашего меню для вывода структуры HTML.

Параметр menu — это название меню, созданного нами в шаге 1. container_id добавляет в HTML-код меню идентификатор CSS, который мы будем использовать позже в стилях CSS. Параметр Walker указывает функции wp_nav_menu() использовать для вывода HTML-разметки наш пользовательский Walker-класс WordPress:

Добавьте этот PHP-код в один из файлов темы. Где бы вы его не поместили, меню будет выводиться в этом месте. Я использую тему WordPress по умолчанию Twenty Thirteen. Она содержит файл header.php, в него я и вставлю этот код.

Если вы сделали все правильно, то сейчас должны увидеть, что в вашей теме отображается HTML-список без заданных стилей:

Добавление CSS

Откройте файл CSS вашей темы styles.css (в папке CSS или в корневом каталоге темы). Вы можете сразу скопировать и вставить весь приведенный ниже код в файл CSS вашей темы. Я буду разбивать CSS-код на части, чтобы пояснять каждый его фрагмент.

Обратите внимание, что мы используем тот же идентификатор, который мы указали в функции wp_nav_menu() — #cssmenu. Первый фрагмент CSS-кода — это всего лишь несколько строк, чтобы быть уверенными, что все браузеры начинают обработку с той же точки:

Первый фрагмент CSS-кода — это всего лишь несколько строк, чтобы быть уверенными, что все браузеры начинают обработку с той же точки:

Следующий фрагмент CSS-кода — это стили первого уровня выпадающего меню. Если браузер пользователя не поддерживает градиенты, то заполните фон цветом #3c3c3c.

Псевдокласс :after позволяет добавить тонкую цветную рамку вокруг каждого пункта меню:

На данный момент ваше меню должно выглядеть так, как показано на рисунке ниже:

Далее нам нужно задать стили для подменю. Нужно, чтобы они по умолчанию были скрыты, а затем выводились, когда пользователь наводит курсор мыши на родительский элемент.

Сначала нам нужно установить для всех пунктов подменю display: none. После этого мы используем псевдокласс :hover, чтобы установить для подменю состояние:hover. Это создаст эффект скрытия и вывода подменю при наведении указателя мыши на родительский элемент:

Если вы все сделали правильно, то должны получить новое выпадающее меню WordPress. Если, вам кажется, что в этом меню что-то не так, прочитайте раздел, посвященный устранению неполадок.

Исходные файлы

По этой ссылке вы можете скачать исходные файлы. ZIP-архив содержит functions.php и styles.css:

Демо-версия: Выпадающее меню для WordPress — Версия 1.0 (3 кБ ZIP)

Список доступных параметров для функции wp_nav_menu( )

Параметр

Описание

название меню. Может содержать: id, slug или имя.

<?php
wp_nav_menu(array(‘menu’ => ‘primary-menu’));
?>

1
2
3

<?php
wp_nav_menu(array(‘menu’=>’primary-menu’));

menu_class

имя CSS класса, который будет назначен элементу оборачивающему меню (ul).
По умолчанию — ‘menu’.

<?php
wp_nav_menu(array(‘menu_class’ => ‘menu-top’));
?>

1
2
3

<?php
wp_nav_menu(array(‘menu_class’=>’menu-top’));

menu_id

имя идентификатора, который будет назначен элементу оборачивающему меню (ul).

<?php
wp_nav_menu(array(‘menu_id’ => ‘menu-top’));
?>

1
2
3

<?php
wp_nav_menu(array(‘menu_id’=>’menu-top’));

container

название контейнера, в который будет обернуто меню.
По умолчанию — ‘div’.

<?php
wp_nav_menu(array(‘container’ => ‘nav’));
?>

1
2
3

<?php
wp_nav_menu(array(‘container’=>’nav’));

container_class

имя CSS класса для контейнера меню.
По умолчанию — ‘menu-{menu slug}-container’.

<?php
wp_nav_menu(array(‘container_class’ => ‘nav-menu-top’));
?>

1
2
3

<?php
wp_nav_menu(array(‘container_class’=>’nav-menu-top’));

container_id

имя идентификатора для контейнера меню.

<?php
wp_nav_menu(array(‘container_id’ => ‘nav-menu-top’));
?>

1
2
3

<?php
wp_nav_menu(array(‘container_id’=>’nav-menu-top’));

fallback_cb

если меню не существует будет вызвана обратная функция (callback). Если ее вызов не нужен, установите значение — ‘false’.
По умолчанию — ‘wp_page_menu’.

<?php
wp_nav_menu(array(‘fallback_cb’ => ‘__return_empty_string’));
//функция __return_empty_string() возвращает пустую строку,
//поэтому в данном случае, если меню нет, то ничего выводится не будет.
?>

1
2
3
4
5

<?php

wp_nav_menu(array(‘fallback_cb’=>’__return_empty_string’));

//функция __return_empty_string() возвращает пустую строку,

//поэтому в данном случае, если меню нет, то ничего выводится не будет.

before

текст, отображающийся перед ссылкой (перед тегом <a>).

<?php
wp_nav_menu(array(‘before’ => ‘|’));
?>

1
2
3

<?php
wp_nav_menu(array(‘before’=>’|’));

after

текст, отображающийся после ссылки (после тега <a>).

<?php
wp_nav_menu(array(‘before’ => ‘|’));
?>

1
2
3

<?php
wp_nav_menu(array(‘before’=>’|’));

link_before

текст, отображающийся перед значением ссылки (внутри тега <a>).

<?php
wp_nav_menu(array(‘link_before’ => ‘[‘));
?>

1
2
3

<?php
wp_nav_menu(array(‘link_before’=>'[‘));

link_after

текст, отображающийся после значения ссылки (внутри тега <a>).

<?php
wp_nav_menu(array(‘link_after’ => ‘]’));
?>

1
2
3

<?php
wp_nav_menu(array(‘link_after’=>’]’));

echo

отвечает за вывод меню. Значение ‘true’ — вывести меню, значение ‘false’ — не выводить меню.
По умолчанию — ‘true’.

<?php
wp_nav_menu(array(‘echo’ => ‘false’));
?>

1
2
3

<?php
wp_nav_menu(array(‘echo’=>’false’));

depth

вывод определенного количества вложенных уровней меню. Значение 0 — вывод всех уровней.
По умолчанию — 0.

<?php
wp_nav_menu(array(‘depth’ => 1)); //будет выводится только первый уровень вложенного меню
?>

1
2
3

<?php
wp_nav_menu(array(‘depth’=>1));//будет выводится только первый уровень вложенного меню

walker

указывает объект, в котором описано построение меню.
По умолчанию — Walker_Nav_Menu.

<?php
wp_nav_menu(array(‘walker’ => new my_custom_walker));
//наш собственный объект описывающий построение меню
?>

1
2
3
4

<?php
wp_nav_menu(array(‘walker’=>newmy_custom_walker));

//наш собственный объект описывающий построение меню

theme_location

выбор места, где нужно вывести меню. Значение должно быть зарегистрировано в функции register_nav_menu()

<?php
wp_nav_menu(array(‘theme_location’ => ‘primary_menu’));
?>

1
2
3

<?php
wp_nav_menu(array(‘theme_location’=>’primary_menu’));

items_wrap

описывает способ обертки пунктов списка.
По умолчанию — ‘<ul id=»%1$s» class=»%2$s»>%3$s</ul>’.

<?php
wp_nav_menu(array(‘items_wrap’ => ‘%3$s’)); //будет удалена обёртка <ul>
?>

1
2
3

<?php
wp_nav_menu(array(‘items_wrap’=>’%3$s’));//будет удалена обёртка <ul>

Сниппет

Добавляем сниппет в таблицу стилей вашей темы, в итоге получим примерно такое меню:

/* reset */
.menu,
.menu ul,
.menu li,
.menu a {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}
 
/* Стили меню */
.menu {
    box-shadow: 1px 1px 10px #333;
    -moz-box-shadow: 1px 1px 10px #333;
    -webkit-box-shadow: 1px 1px 10px #333;
    height: 40px;
    color:#FFFFFF;
 
    background:-moz-linear-gradient(top,#545454 1px,#363636);;
    background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#545454),color-stop(1,#363636));
 
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background:#363636;
}
 
.menu li {
    position: relative;
    list-style: none;
    float: left;
    display: block;
    height: 40px;
}
 
/* css ссылок навигации */
.menu li a {
    display: block;
    padding: 0 14px;
    margin: 6px 0;
    line-height: 28px;
    text-decoration: none;
 
    border-left: 1px solid black;
 
    font-weight: bold;
    font-size: 13px;
 
    color: #fff;
    text-decoration:none;
}
 
.menu li:first-child a { border-left: none; }
.menu li:last-child a{ border-right: none; }
 
.menu li:hover > a { color: #ccc; }
 
/* css блока выпадающего меню */
.menu .sub-menu {
    position: absolute;
    top: 40px;
    left: 0;
    width:200px;
 
    background:#363636;
    box-shadow:2px 2px 10px #333;
    -moz-box-shadow: 2px 2px 10px #333;
    -webkit-box-shadow: 2px 2px 10px #333;
 
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
 
    -webkit-transition: opacity .25s ease .1s;
    -moz-transition: opacity .25s ease .1s;
    -o-transition: opacity .25s ease .1s;
    -ms-transition: opacity .25s ease .1s;
    transition: opacity .25s ease .1s;
    opacity: 0;
}
 
.menu li:hover > .sub-menu { opacity: 1;  }
 
.menu .sub-menu li {
    height: 0;
    overflow: hidden;
    padding: 0;
    width:100%;
 
    -webkit-transition: height .25s ease .1s;
    -moz-transition: height .25s ease .1s;
    -o-transition: height .25s ease .1s;
    -ms-transition: height .25s ease .1s;
    transition: height .25s ease .1s;
}
 
.menu li:hover > .sub-menu li {
    height: 36px;
    overflow: visible;
    padding: 0;
}
/* css ссылок выпадающего меню */
.menu .sub-menu li a {
    padding: 4px 0 4px 14px;
    margin: 0;
 
    border: none;
    border-bottom: 1px solid black;
}
 
.menu .sub-menu li:last-child a { border: none; }

По всем вопросам и отзывам просьба писать в комментарии ниже.

Не забывайте, по возможности, оценивать понравившиеся записи количеством звездочек на ваше усмотрение.

VN:F

please wait…

Rating: 5.0/5 (4 votes cast)

Как сделать выпадающее меню на Вордпресс?

Иногда возникает необходимость создания выпадающего меню на WordPress. Сделать его можно из любого созданного вами меню. Для примера давайте перейдем в раздел «Внешний вид» и выберем там подраздел «Меню».

Далее выберем любое произвольное меню, которое мы хотим сделать выпадающим, и нажмем на кнопку «Выбрать».

После этого перед нами откроется выбранное нами меню (см. картинку ниже).

Для того сделать меню выпадающим на WordPress, нам достаточно просто выбрать раздел, который мы хотим сделать под меню и отодвинуть его чуть чуть дальше основного (см. картинку ниже). После этого не забываем сохранить внесенные изменения.

Все после этого, все изменения сохраняться и наше меню преобразится.

Responsive Menu

Перейти к плагину

Как понятно по названию, разработчики сделали ставку на респонсивный дизайн. Как утверждают авторы, в их плагине более 150 настраиваемых опций, что дает в совокупности более 22 тысяч вариаций настроек. Расширение прописывается в консоли WordPress, опции раскиданы по девяти вкладкам.

В версии PRO добавлены эффекты анимации, появляются дополнительные настройки цвета и некоторые другие удобные вещи, такие как, например, предварительный просмотр изменений перед их применением. Да, работать с премиальной версией безусловно удобней, и опций в ней намного больше, однако и возможностей базового варианта вполне хватает для создания меню, которое будет одинаково красиво смотреться как на ПК, так и на мобильных устройствах.

Интересно, что в бесплатной версии можно установить фоновое изображение, но смена цвета фона – функция PRO. Ограничение функционала произведено немного загадочно. Например, размер шрифта в базовом варианте выставляется в пикселях, а в премиум-версии добавляется возможность изменения в процентах. И таких платных «улучшений», без которых вполне можно обойтись, не так уж мало.

Общие сведения:

разработчик: ExpressTech;
версия WordPress: от 3.6, тестировано до 5.5.1;
версия PHP: 5.5 и выше;
текущая версия расширения: 3.1.30;
количество активных установок: более 100000;
локализация: 10 языков;
русский интерфейс: нет;
рейтинг WordPress: 4,7.

Базовый функционал Responsive Menu:

фоновое изображение для меню;
выбор шрифтов, установка выравнивания текста;
простое изменение цвета фона, границ, текста;
возможность добавления кастомных компонентов HTML;
импорт и экспорт по одному клику мыши;
загрузка пользовательских логотипов, изображений;
интеграция поискового механизма;
выбор размеров дисплея, на котором будет показываться данное меню;
эффекты анимации;
поддержка WPML, Polylang, RTL;
и другие опции.

К недостаткам Responsive Menu можно отнести отсутствие русской локализации, однако, во-первых, это явление временное, а во-вторых, интерфейс интуитивно понятен и назначение подавляющего большинства настроек ясно и без перевода даже людям с очень слабым знанием английского языка. Если же возникнет желание сделать апгрейд до PRO, за одиночную лицензию придется заплатить $14,99, а за мульти-лицензию (до 100 сайтов) – $49,99.

Горизонтальное меню

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

Горизонтальное меню можно создать путем стилизации обычного списка. Свойству display для элементов <li> нужно присвоить значение inline, чтобы пункты списка располагались друг за другом.

Для размещения пунктов меню по горизонтали, сначала создадим маркированный список с ссылками:

<ul id="navbar">
  <li><a href="#">Главная</a></li>
  <li><a href="#">Новости</a></li>
  <li><a href="#">Контакты</a></li>
  <li><a href="#">О нас</a></li>
</ul>

Напишем для нашего списка пару правил, сбрасывающих стиль используемый для списков по умолчанию, и переопределим пункты списка с блочных на строчные:

#navbar {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
#navbar li { display: inline; }

Попробовать »

Теперь нам осталось лишь определить стилевое оформление для нашего горизонтального меню:

#navbar {
  margin: 0;
  padding: 0;
  list-style-type: none;
  border: 2px solid #0066FF;
  border-radius: 20px 5px;
  width: 550px;
  text-align: center;
  background-color: #33ADFF;
}
#navbar a {
  color: #fff;
  padding: 5px 10px;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  width: 100px;
}
#navbar a:hover {
  border-radius: 20px 5px;
  background-color: #0066FF;
}

Попробовать »