一个tab选项卡的移动特效

=============html=====
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <p><b></b></p>
</ul>
==========css=========
*{margin: 0;padding: 0;}
ul{list-style:none;position: relative;}
ul li{width:50px;height: 20px;float: left;text-align: center;}
p{position:absolute;top: 22px;border-top:2px solid red;width: 50px;height: 7px;text-align: center;}
b{display:inline-block;width:0;height:0;border-style:solid dashed dashed dashed;border-width:9px;border-color: #ff6600 #fff #fff #fff;}
========js===========
$(‘ul li‘).hover(function () {
    var index=$(this).index();
    var liwidth=$(this).width();
    $(‘ul p‘).animate({‘left‘:index*liwidth},500)
})