Выпадающее меню на CSS

Сегодня расскажу о том как делать красивые меню без использования JavaScript в CSS.

А точнее выпадающее меню. Я рассмотрю самый простой способ. 
Сделаем меню на подобии этого:

Выпадающее меню

Таков будет код HTML:

 <ul id="nav">
  <li><a href="#null">Главная</a></li>
  <li><a href="#null">Контакты</a></li>
  <li><a href="#null">Услуги</a>
   <ul>
    <li><a href="#null">1</a></li>
    <li><a href="#null">2</a></li>
    <li><a href="#null">3</a></li>
   </ul>
  </li>
 </ul>

А сейчас рассмотрим как из этого с помощью CSS получить простейшее выпадающее меню.

CSS:

#nav, #nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid #000;
  background: #515151;
  float: left;
  width: 100%;
}
#nav li {
  float: left;
  position: relative;
}
#nav li ul {
  display: none;
}

Убрали буллеты из нашего списка — list-style:none. Украсили меню границей и задним фоном.

При помощи float:left выстроили каждый элемент списка <li> в одну линию. Указав display:none скрыли подменю 2-го уровня. Все элементы списка <ul id="nav"> теперь «плавающие».

Свойства float:left мы указали самому контейнеру. Это избавляет нас от так называемого «схлопывания» списка, но заставляет нижележащие элементы обтекать меню справа. Именно поэтому мы указываем ширину для всего меню 100% — чтобы справа просто не оставалось места.

Далее...

#nav a {
  color: #fff;
  text-decoration: none;
  display: block;
  width: 140px;
  padding: 4px 10px;
}
#nav a:hover {
  color: #000;
  background: #ccc;
}
#nav li:hover {
  background: #333;
}

Сначало мы оформили ссылки (#nav a), чтобы они так сказать были похожи на кнопки.

Каждому элементу <a> мы присвоили свойство display:block, что дало нашим ссылкам ширину и высоту. 

text-decoration:none - убирает подчеркивание (ведь ссылка содержит подчеркивание)

Задали ширину каждой ссылки 140 пикселей (не включая отступы).

Селектор #nav a:hover срабатывает в том случае, когда мы подводим курсор к ссылке,а 

#nav li:hover — когда подводим его к элементу списка.

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

Мы дописываем к уже существующему правилу:

#nav li ul 

следующие инструкции:

#nav li ul {
  display: none;
  position: absolute;
  background: #333;
  padding: 8px 0;
  width: 158px;
}

position:absolute служит для абсолютного позиционирования подменю относительно элемента <li> верхнего уровня.

#nav li li a {
  width: 138px;
}
#nav li:hover ul {
  display: block;
}

Именно строка display:block для #nav li:hover ul заставляет подменю появиться при подводе курсора к ссылке, сменяя ранее установленный режим (display:none).

Мы создали простейшее выпадающее меню, так же можно добавить 3 уровень меню, фон сделать спрайтами, и таким образом можно создать весьма симпатичное меню:)