Горизонтальное меню с подсказками

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

Вот так оно выглядит

Если скопируете код и вставите его в этом редакторе , то увидите меню с подсказками в рабочем исполнении

Код

<style>#menu ul {

 list-style: none;

 font-family: Georgia;

 font-size: 18px;

 font-style: italic;

 line-height: 24px;

 border: 2px solid #000000;

 border-left: 1px solid #000000;

 float: left;

 padding: 0;

 margin: 12px 0 25px 24px;

 }

#menu ul li {

 float: left;

 }

#menu ul li a {

 display: block;

 text-decoration: none;

 background-color: #595959;

 padding: 5px 10px 0 10px;

 color: #fefefe;

 width: 120px;

 border-right: 1px solid #797979;

 border-left: 1px solid #191919;

 }

#menu ul li a span {

 display: block;

 }

#menu ul li a span.text-top {

 border-bottom: 1px solid #595959;

 }

#menu ul li a:hover span.text-top {

 border-bottom: 1px dashed #fefefe;

 color: #ffddbb;

 }

#menu ul li a span.text-bottom {

 visibility: hidden;

 font-size: 11px;

 text-align: right;

 }

#menu ul li a:hover span.text-bottom {

 visibility: visible;

}

</style>

<div id="menu">

 <ul>

  <li>

   <a href="#">

    <span class="text-top">Главная</span>

    <span class="text-bottom">все стихи</span>

   </a>

  </li>

  <li>

   <a href="#">

    <span class="text-top">Пункт №2</span>

    <span class="text-bottom">Подсказка №2</span>

   </a>

  </li>

  <li>

   <a href="#">

    <span class="text-top">Пункт №3</span>

    <span class="text-bottom">Подсказка №3</span>

   </a>

  </li>

  <li>

   <a href="#">

    <span class="text-top">Пункт №4</span>

    <span class="text-bottom">Подсказка №4</span>

   </a>

  </li>

  <li>

   <a href="#">

    <span class="text-top">Пункт №5</span>

    <span class="text-bottom">Подсказка №5</span>

   </a>

  </li>

 </ul>

</div>

Вместо решёток, отмеченных синим цветом, вставьте адреса страниц, на которые будет осуществлён переход при нажатии. Пункты и подсказки меняйте на свои. При необходимости добавляйте ещё вкладки меню, используя такой  участок кода

<li>

   <a href="#">

    <span class="text-top">Пункт №2</span>

    <span class="text-bottom">Подсказка №2</span>

   </a>

  </li>

В настройках самого стиля горизонтального меню можно поиграться со всеми значениями. Цвет фона, рамки, цвет и размер шрифта и другими. Будут сложности обращайтесь в комментариях. Готовый код устанавливается обычным способом в гаджет HTML/JavaScript и перетаскивается над сообщениями или под шапку блога. 

Посмотрите другие варианты меню под соответствующим ярлыком. 

Здесь вы можете оформить подписку на новые шпаргалки

Введите Ваш email