Установка: Управление сайтом--Управление дизайном--Таблица стилей (CSS)
и в самом низу прописываем данные код.
Code
/*
=============================================================
© 2009 Warez every day
http://2all4you.ru
=============================================================
*/
ul#menu {
margin: 0px; /* Отступ для кнопок */
list-style-type : none;
font-size: 10px; /* Размер шрифта в кнопках */
}
ul#menu li {
margin-bottom: 3px; /* Отступ между кнопками */
}
ul#menu a {
position: relative;
width: 130px; /* Ширина кнопки */
height: 2em; /* Высота кнопки */
display: block; /* Отображение кнопок (НЕ МЕНЯТЬ) */
padding: 3px; /* Отступ для текста в кнопках */
padding-right: 0; /* Правый отступ для кнопок */
border: 1px solid #002948; /* Задание границы кнопки */
background-color: #c4e5ff; /* Задание фона кнопки */
color: #000; /* Цвет шрифта в кнопках */
text-decoration: none; /* Отмена подчёркивания ссылок */
font-weight: bold; /* Полужирный шрифт */
cursor: pointer; /* Задание типа курсора */
}
ul#menu a span {
position: absolute; /* Задание позиции подсказок (НЕ МЕНЯТЬ) */
top: -10000px; /* Задание позиции подсказок (НЕ МЕНЯТЬ) */
left: -10000px;/* Задание позиции подсказок (НЕ МЕНЯТЬ) */
display: block; /* Отображение подсказок (НЕ МЕНЯТЬ) */
width: 100%; /* Длинна поля подсказок */
height: 2em; /* Задание высоты поля подсказок */
background-color: #c4e5ff; /* Задание фона поля подсказок */
border: 1px solid #002948; /* Задание границы поля подсказок */
border-left: 0; /* Отключение левой границы */
padding: 3px; /* Отступ для текста подсказки */
padding-left: 20px; /* Отступ для текста подсказки */
cursor: pointer; /* Задание типа курсора */
color: #333; /* Цвет шрифта в подсказках */
}
ul#menu a:hover, ul#cmd a:focus, ul#cmd a:active {
background: #c4e5ff; /* Задание фона подсказки */
}
ul#menu a:hover span, ul#cmd a:focus span, ul#cmd a:active span {
top : -1px; /* Задание поля подсказки (НЕ МЕНЯТЬ) */
left : 80px; /* Задание поля подсказки (НЕ МЕНЯТЬ) */
}
/* ====== Copyright by http://2all4you.ru ====== */
Далее
В нужном месте вставляем наше будущие меню с пояснениями
Тут нужно редактировать под себя:
Code
<ul id="menu">
<li><a href="Ссылка"><strong>Главная</strong>
<span>→ Главная страница сайта</span></a></li>
<li><a href="Ссылка"><strong>Форум</strong>
<span>→ Наш форум сайта</span></a></li>
<li><a href="#"><strong>Гостевая</strong>
<span>→ Оставить мнение о сайте</span></a></li>
<li><a href="#"><strong>Гостевая</strong>
<span>→ Оставить мнение о сайте</span></a></li>
<li><a href="#"><strong>Гостевая</strong>
<span>→ Оставить мнение о сайте</span></a></li>
<li><a href="#"><strong>Гостевая</strong>
<span>→ Оставить мнение о сайте</span></a></li>
</ul>
Данная форма дает пояснение:
Code
<span>→ Оставить мнение о сайте</span>