$(document).ready(function() { $(".nav li").hover(function() { $(this).find("div").stop() .animate({left: "210", opacity: 1}, "fast").css("display", "block") }, function() { $(this).find("div").stop().animate({left: "0", opacity: 0}, "fast") }); });
body { background: #005094; font-size: 10px ; margin: 0; padding: 0; } .nav { float: left; margin: 130px 0 0; padding: 0; width: 200px; list-style: none; border-bottom: 1px solid #3373a9; border-top: 1px solid #003867; } .nav li { position: relative; float: left; margin: 0; padding: 0; } .nav li a{ border-top: 1px solid #3373a9; border-bottom: 1px solid #003867; padding: 10px 10px 10px 25px; display: block; color: #fff; text-decoration: none; width: 165px; background: #005094; position: relative; z-index: 2; } .nav li a:hover { background-color: #004c8d; border-top: 1px solid #1a4c76; } .nav li div { display: none; position: absolute; top: 2px; left: 0; width: 225px; font-size: 11px; } .nav li div p { margin: 7px 0; line-height: 1.6em; padding: 2px 5px 2px 30px; background: #fff; }
<ul class="nav"> <li> <a href="#">List 01</a> <div><p>List 01 tooltip</p></div> </li> <li> <a href="#">List 02</a> <div><p>List 02 tooltip</p></div> </li> <li> <a href="#">List 03</a> <div><p>List 03 tooltip</p></div> </li> <li> <a href="#">List 04</a> <div><p>List 04 tooltip</p></div> </li> <li> <a href="#">List 05</a> <div><p>List 05 tooltip</p></div> </li> <li> <a href="#">List 06</a> <div><p>List 06 tooltip</p></div> </li> </ul>