Установка: Управление сайтом--Управление дизайном--Таблица стилей (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>
|