Прежде всего нам нужен html-скелет будущего меню
<ul id="menu">
<li><a href="/link.htm">ГЛАВНАЯ</a></li>
<li>
<a href="/link-1.htm">ПУНКТ 1</a>
<ul>
<li><a href="/link-1-1.htm">ПУНКТ 1.1</a></li>
<li><a href="/link-1-2.htm">ПУНКТ 1.2</a></li>
<li><a href="/link-1-1.htm">ПУНКТ 1.3</a></li>
</ul>
</li>
<li>
<a href="/link-2.htm">ПУНКТ 2</a>
<ul>
<li><a href="/link-2-1.htm">ПУНКТ 2.1</a></li>
<li><a href="/link-2-2.htm">ПУНКТ 2.2</a></li>
<li><a href="/link-2-3.htm">ПУНКТ 2.3</a></li>
<li><a href="/link-2-4.htm">ПУНКТ 2.4</a></li>
</ul>
</li>
<li>
<a href="/link-3.htm">ПУНКТ 3</a>
<ul>
<li><a href="/link-3-1.htm">ПУНКТ 3.1</a></li>
<li><a href="/link-3-2.htm">ПУНКТ 3.2</a></li>
</ul>
</li>
<li>
<a href="/link-4.htm">ПУНКТ 4</a>
<ul>
<li><a href="/link-4-1.htm">ПУНКТ 4.1</a></li>
</ul>
</li>
</ul>
Но сделать скелет – это полдела. Пунктов и подпунктов меню может быть сколько угодно, просто нужно запомнить, что количество контейнеров <ul> и <li> должно соответствовать количеству пунктов и подпунктов меню.
Основная суть всплывающего вертикального меню кроется не в html-скелете, а в стилях. Переходим к редактированию стилей CSS для нашего всплывающего меню. Как вы обратили внимание, в скелете сделан упор на идентификатор id=”menu”. Мой совет – не стоит для каждого меню прописывать отдельные классы в CSS – во-первых, велик риск запутаться и на выходе получить раскрытое меню меню на сайте, во-вторых – не тратьте свое драгоценное время! Вот вокруг id=”menu” нам и предстоит плясать оставшееся время. Да, кстати, вы можете присвоить идентификатору другое имя – сути не поменяет.
Первый параметр в CSS будет относится в целом к меню – зададим общие настройки для элементов, входящих в контейнер <ul id=”menu”>
#menu
{
padding: 0;
margin: 0;
font-size: 10px;
font-family: Georgia;
font-weight : bolder;
}
Далее нам необходимо прописать параметры для основных пунктов всплывающего меню, которыми являются «Главная», «Пункт 1», «Пункт 2», «Пункт 3» и «Пункт 4»
#menu li
{
width: 97px;
height: 25px;
list-style: none;
float: left;
position: relative;
}
Здесь главный параметр – это float: left, который фиксирует положение пунктов слева направо. В противном случае, если не прописать параметр, то ваше меню не будет выполнять функцию раскрытия.
Кроме того, отсутствие параметра position: relative; приведёт к тому, что подпункты меню при наведении курсора мыши на пункты меню будет отображаться в крайнем углу страницы, и следовательно сделать переход на ссылку подпункта сделать будет невозможно.
Теперь работаем непосредственно с подпунктами
#menu li ul
{
list-style: none;
padding: 0;
margin: 0;
display: none;
}
Эта запись в таблицу стилей отвечает за отображение подпунктов меню, а именно по средством параметра display: none; - не отображать. Так же здесь в обязательном порядке прописываются параметры padding и margin – задают расположение всплывающих подпунктов после наведения курсора мыши на соответствующий пункт меню.
#menu li ul li
{
width: 97px;
height: 25px;
}
Запись задает размеры всплывающих подпунктов меню.
А поскольку меню представляет собой набор ссылок по страницам сайта, то нужно проработать отображение ссылок ссылок в кнопках меню. Поскольку параметры контейнеров <a> не меняются, то пропишем для них стили общими записями
#menu li a
{
width: 97px;
height: 25px;
display: block;
color: #fff;
text-decoration: none;
}
А теперь, когда мы прописали параметры скелета вертикального всплывающего меню, самое время сделать так, чтобы подпункты меню отображались при наведении курсора мыши
#menu li:hover ul, #menu li.dont_look ul
{
display: block;
}
Запись указывает на то, что отображается весь список подпунктов меню, при наведении на соответствующий пункт меню. В противном случае вы получаете обычные кнопки меню, без всплывающих подпунктов.
В качестве декораций, чтобы пункты и подпункты меню меняли свой цвет при наведении курсора мыши, необходимо сделать запись
#menu li:hover, #menu li.dont_look
{
background #fff;
}
Где вместо #fff можно указать любой другой цвет.
Вот собственно мы и завершили создание вертикального всплывающего меню по средствам стандартных html-контейнеров списков и таблицы стилей.
Для придания своему меню уникальности, можно задать цвет границам пунктов и подпунктов. Для этого достаточно добавить в запись стилей
#menu li
{
width: 97px;
height: 25px;
list-style: none;
float: left;
position: relative;
}
параметры границ border – размер, стиль границы, цвет границы.
А уже в запись
#menu li:hover, #menu li.dont_look
{
background #fff;
}
Добавить отличные параметры для того, чтобы было видно, на какой пункт или подпункт наведен курсор мыши.