Как сделать выпадающий список меню

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

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

 <nav>
     <ul>
       <li><a href="#">Категории</a>
             <ul>
               <li><a href="#">HTML</a></li>
               <li><a href="#">CSS</a></li>
               <li><a href="#">WordPress</a></li>
               <li><a href="#">Joomla</a></li>
             </ul>
        </li>
        <li><a href="#">Новости</a></li>
        <li><a href="#">Конкурсы</a></li>
        <li><a href="#">Архив сайта</a></li>
      </ul>
</nav>

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

li ul { display:none;}

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

li:hover ul {display:block;}

А теперь пропишем свойства для нашего выпадающего списка:

li ul li{
    display:block; /* Определяем вид показа элемента в документе */
    float:left; /* Задаём положение пункта меню */
    position:relative; /* Определяем новую позицию для пункта выпадающего меню */
    right:0.7em; /* Сдвигаем пункт меню влево */
     width:100%; /* Ширина пункта меню */
   margin:0; /* задаём значение полей вокруг пункта меню */
   padding:0.5em; /* Задаём отступы внутри пункта меню */ 
   background:#006666; /* Цвет фона пункта меню */    
}
li ul li:hover, li ul li:hover a{ 
   background:#FF9966; /* Цвет фона выпадающего списка меню */ 
}

В результате у меня получилось вот такое меню: меню с выпадающим списком. Можно добавить небольшую задержку появления списка и пунктов меню и окончательный вид получился таким. Надеюсь Вам, дорогие читатели, было всё понятно что я пытался изложить выше. Конечно можно было сделать наше меню намного лучше, использовав анимацию и тому подобные вещи, но это я предлагаю сделать вам самостоятельно.