→   Быстрые подсказки на jQuery

1. .menutest {
2.     margin: 100px auto 40px;
3.     padding: 0;
4.     list-style: none;
5.     width:200px;
6.     height:20px; }
8. .menutest li {
9.     padding: 0;
10.     margin: 0 2px;
11.     float: left;
12.     position: relative;
13.     text-align: center;}
15. .menutest a {
16.     padding: 14px 10px;
17.     display: block;
18.     color: #fff;
19.     width: 144px;
20.     text-decoration: none;
21.     font-weight: bold;
22.     background: url(images/button.gif) no-repeat center center;}
24. .menutest li b {
25.     background: url(/images/hover.png) no-repeat;
26.     width: 180px;
27.     height: 55px;
28.     position: absolute;
29.     top: -85px;
30.     left: -15px;
31.     text-align: center;
32.     padding: 10px 12px 10px;
33.     font-style: normal;
34.     z-index: 2;
35.     display: none}

.

1. <ul class="menutest">
2.     <li>
3.         <a href="http://yeap.narod.ru">Кнопка-ссылка</a>        
4.         <b>Кликни и попадешь на главную страницу</b>
5.     </li>
6. </ul>

Пишем небольшой сниппет для jQuery↓

1. $(document).ready(function(){
2.     $(".menutest a").hover(function() { //находим элемент .menutest
3.         $(this).next("b").animate({opacity: "show", top: "-75"}, "slow"); // показываем плашку с подсказкой
4.     }, function() {
5.         $(this).next("b").animate({opacity: "hide", top: "-85"}, "fast"); // скрываем плашку с подсказкой
6.     });
7. });