マウスに合わせてメニューに要素が付いてくる

Result

jQuery

//マウスホバーイベント
$('li a').hover(function() {
    var p = $(this).position().left;
    //マウスが乗るとclass="arrow"がアニメーションでポジションを変更
    $('.arrow').animate({
        //数値で位置を決める・・これだと汎用性が無いね:(
        left: (p + 60) + 'px'});
}, function() {});

css

.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; 
    }

html

<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>