Создаем выпадающее меню средствами html + css

В данном уроке мы попробуем создать следующее выпадающее меню - popup menu

Первым делом подключаем к странице файл стилей -

<link rel="stylesheet" href="css/style.css" type="text/css" /> содержимое этого файла находится здесь - css/style.css

данный класс, описанный как уникальный по его id (о чём свидетельствует знак #) будет задавать у нас контейнер для содержимого страницы

в html опишем его как див -

<div id="bm_main_container">

</div>

в html внутри блока bm_main_container

<div id="bm_main_container">

<!-- описываем блок, представляющий строку меню -->

<div id="bm_category_container"></div>

</div>

в css добавляем

div#bm_category_container {
float: left; /* прижимаем блок меню к левой границе */
background: #fff; /* задаем белый фон */
width: 100%; /* располагаем меню во всю ширину */
height: 28px; /*высоту строки меню определяем в 28 пикселей */
border-top: 1px dashed #000; /* верхний и нижний бордюр черного цвета, выполненный штрихами*/
border-bottom: 1px dashed #000;
margin-bottom: 10px; /* внешний отступ под строкой меню 10 пикселей */
}

/* пункты меню будут элементами ненумерованного списка, поэтому уточняем их свойства

для самого блока ненумерованного списка - ul

*/

#bm_category_container ul {
margin: 1px 5px; /*внешний отступ сверху и снизу по 1 пикселю, слева и справа - по 5 */
padding: 0; /* без внутренних отступов */
}

/* для каждого из пунктов меню */
#bm_category_container li a {

float: left; /* прижать к левой границе */
display: block; /* отображать блоками - т. е. в начале и конце блока содержимое переносится, если не умещается в заданных размерах */
color: #901e78; /* для пунктов меню задаем пурпурный цвет */
padding: 5px 8px; /* внешние отступы сверху/снизу - 5 пикселей, слева/справа - 8 */
font-weight: bold; /* жирный шрифт */
font-family: Verdana, Geneva, sans-serif; /* определяем написание шрифта */
font-size: 14px; /* размер букв - 14 пиксель */
}

<div id="bm_category_container">

<!-- открываем тег ненумерованного списка -->
<ul>

<!-- задаем блок для отображения пункта меню -->
<div id="header_wm">

<!-- подпункты будут ненумерованным списком -->
<ul class="models_wm">
<li>

<!-- описываем ссылку на пункт меню и некоторые дополнительные свойства стиля -->
<a style="text-decoration: none;" href="#">&bull;&nbsp;Пункт меню1</a>

<!-- подпункты будут также ненумерованным списком -->
<ul>

<!-- для упорядочения подпунктов применяем таблицу -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">

<!-- в первой строке выделяем названия столбцов для подгрупп-->
<tr>
<td><li>

<!-- и прописываем их названия -->
<a href="#">Подгруппа1</a>
</li></td>
<td><li><a href="#">Подгруппа2</a></li></td>
<td><li><a href="#">Подгруппа3</a></li></td>
</tr>

<!-- прописываем названия подпунктов меню -->
<tr>
<td><a style="color: #fff; font-weight: normal;" href="#">Подпункт1</a></td>
<td><a style="color: #fff; font-weight: normal;" href="#">Подпункт2</a></td>
<td><a style="color: #fff; font-weight: normal;" href="#">Подпункт3</a></td>
</tr>
<tr>
<td><a style="color: #fff; font-weight: normal;" href="#">Подпункт1</a></td>
<td><a style="color: #fff; font-weight: normal;" href="#">Подпункт2</a></td>
<td><a style="color: #fff; font-weight: normal;" href="#">Подпункт3</a></td>
</tr>
<tr>
<td><a style="color: #fff; font-weight: normal;" href="#">Подпункт1</a></td>
<td><a style="color: #fff; font-weight: normal;" href="#">Подпункт2</a></td>
<td><a style="color: #fff; font-weight: normal;" href="#">Подпункт3</a></td>

<!-- закрываем все открытые теги -->
</tr>
</table>
</ul>
</li>
</ul>
</div>

</ul>

</div>

/* последовательно описываем все необходимые свойства для оформления пункта меню и подпунктов */

/* сначала описываем свойства названия пункта меню */

#header_wm .models_wm {
list-style-type: none; /* стиль элемента списка - невидимый */
float: left; /* прижимать элемент к левой границе на странице */
}
#header_wm .models_wm li {

/* прижимать элемент к левой границе на странице */
float: left;

/* положение для элемента - относительное - в данном контексте определяет положение выпадающей вкладки с подменю */
position: relative;
}
#header_wm .models_wm li a {
float: left; /* прижимать элемент к левой границе на странице */
position: relative; /* положение относительное */
font-size: 1.2em; /* размер шрифта 1.2 от ширины буквы M */
color: #901e78; /* цвет пурпурный */
text-decoration: none; /* подчеркивание отключаем */
font-weight: bold; /* шрифт жирный*/
}

/* при наведении указателя мыши на данный пункт меню - */
#header_wm .models_wm li a:hover {
text-decoration: underline; /* включаем подчеркивание */
background: #901e78; /* цвет фона - пурпурный */
color: #fff; /* цвет букв - белый */

}

/* этот элемент в описании ответствен за отображение вкладки подменю - при наведении указателя мыши на пункт меню активируется показ вкладки подменю представленной тегом ul, и отображается вкладка в виде блока */

#header_wm .models_wm li:hover ul {
display: block; /* если попробовать закомментировать данное свойство или изменить его значение на другое, то всплывающая вкладка подпункта меню не появится */
}