Несколько лет назад создание выпадающего меню на сайте было кошмаром для веб-мастеров. Без JavaScript-кода, который обычно состоял из нескольких сотен строк, никто бы даже не попытался реализовать такое решение. Сегодня, в эпоху CSS 3, создание выпадающего меню является чистым удовольствием и, что самое главное, нам не нужно использовать никакие скрипты, запущенные на стороне клиента.
Мы начинаем создавать наше меню, конечно же, с создания скелета в HTML 5:
Сам код:
/* задаем цвет фона для контейнера nav. */
nav {
margin: 100px 0;
background-color: E64A19;
}
/* убираем отступы и поля, а также list-style для "ul",
* и добавляем "position:relative" */
nav ul {
padding:0;
margin:0;
list-style: none;
position: relative;
}
/* применяем inline-block позиционирование к элементам навигации */
nav ul li {
margin: 0px -7px 0 0;
display:inline-block;
background-color: E64A19;
}
/* стилизуем ссылки */
nav a {
display:block;
padding:0 10px;
color:FFF;
font-size:20px;
line-height: 60px;
text-decoration:none;
}
/* изменяем цвет фона при наведении курсора */
nav a:hover {
background-color: 000000;
}
После применения стилей у нас должно получиться нечто вроде этого:
Чтобы добавить выпадающий список к какому-либо из элементов HTML меню, нам нужно добавить <ul> внутрь элемента <li> для пункта, в котором нужно скрыть выпадающий список:
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">WordPress</a>
<!-- первый уровень выпадающего списка -->
<ul>
<li><a href="">Themes</a></li>
<li><a href="">Plugins</a></li>
<li><a href="">Tutorials</a></li>
</ul>
</li>
<li><a href="">Graphic Design</a></li>
<li><a href="">Inspiration</a></li>
<li><a href="">Contact</a></li>
<li><a href="">About</a></li>
</ul>
</nav>