$('li a').hover(function() { var p = $(this).position().left; $('.arrow').animate({ left: (p + 60) + 'px'}); }, function() {});
.content { position: absolute; width: auto; height: 400px; } .arrow { position: absolute; margin-top: 0px; border-color: #696868 transparent; border-style: solid; border-width: 10px 10px 0px 10px; height: 0px; width: 0px; } .options ul { margin-top: 20px; margin-left: 20px; padding: 0; float: left; } .options ul li { display: inline; } .options ul li a { font-family: Arial; font-size: 14px; float: left; text-decoration: none; color: #696868; padding: 4px; margin-left: 50px; outline: 0; border: 0; display: block ; width: 50px ; } .options ul li a:hover { color: #666; } .menu { width: auto; height: 60px; background-color: #e2f2fd; } .head { width:auto; height: 25px; background: #696868; }
<div class="content"> <div class="head"></div> <div class="arrow"></div> <div class="menu"> <div class="options"> <ul> <li><a href="#">List01</a></li> <li><a href="#">List02</a></li> <li><a href="#">List03</a></li> <li><a href="#">List04</a></li> <li><a href="#">List05</a></li> </ul> </div> </div> </div>