Javascript 弹性CSS菜单

我有一个css菜单，当鼠标离开时，它的底线将跟随移动并返回原点

但是，定位有点奇怪。 有人知道怎么把这条线居中吗

var activeOffset=$（'nav ul.active'）.position（）.left；
var activeItemWidth=$（'nav ul.active'）.width（）；
$（'document'）.ready（函数（）{
$（'.dot'）.css（'left'，activeOffset+activeItemWidth/2）；；
});
$（'nav'）.mouseout（函数（）{
$（'.dot'）.css（'left'，activeOffset+activeItemWidth/2）；
});
$（'nav ul li'）。悬停（函数（）{
var navOffset=$（this）.position（）.left；
var navItemWidth=$（this）.width（）；
$（'.dot'）.css（'left'，navOffset+navItemWidth/2）；
});
nav{
位置：固定；
顶部：70像素；
左：50%；
宽度：1024px；
文本对齐：居中；
转换：translateX（-50%）translateY（0）；
-webkit转换：translateX（-50%）translateY（0）；
}
导航：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
李国荣{
列表样式：无；
显示：内联块；
流动：隐藏；
}
海军ulli a{
显示：块；
填充：10px 10px；
文字装饰：无；
字号：18px；
位置：相对位置；
颜色：rgba（0,0,0,1）；
/*-webkit转换：translateX（-15%）；
转化：translateX（-15%）*/
边界半径：50px；
/*宽度：130%*/
文本对齐：居中；
-webkit转换持续时间：0.25s；
过渡时间：0.25s；
}
导航ulli a：悬停{
颜色：#da98b4；
}
主动的，主动的{
颜色：黑色；
}
导航点{
背景色：#da98b4；
宽度：76px；
高度：8px；
位置：绝对位置；
底部：0；
左：0；
边界半径：25px；
-webkit转换持续时间：0.5s；
过渡时间：0.5s；
}











您可以运行下面的代码段来查看代码是否正常工作


var activeOffset=$（'nav ul.active'）.position（）.left；
//var activeItemWidth=$（'nav ul.active'）.width（）；
$（'document'）.ready（函数（）{
$（'.dot'）.css（'left'，activeOffset）；
});
$（'nav'）.mouseout（函数（）{
$（'.dot'）.css（'left'，activeOffset）
});
$（'nav ul li'）。悬停（函数（）{
var navOffset=$（this）.position（）.left；
//还删除了导航宽度
//var navItemWidth=$（this）.width（）；
$（'.dot'）.css（'left'，navOffset/*+navItemWidth/2*/）；
});
nav{
位置：固定；
顶部：70像素；
左：50%；
宽度：1024px；
文本对齐：居中；
转换：translateX（-50%）translateY（0）；
-webkit转换：translateX（-50%）translateY（0）；
}
导航：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
李国荣{
列表样式：无；
显示：内联块；
流动：隐藏；
}
海军ulli a{
显示：块；
填充：10px 10px；
文字装饰：无；
字号：18px；
位置：相对位置；
颜色：rgba（0,0,0,1）；
/*-webkit转换：translateX（-15%）；
转化：translateX（-15%）*/
边界半径：50px；
/*宽度：130%*/
文本对齐：居中；
-webkit转换持续时间：0.25s；
过渡时间：0.25s；
}
导航ulli a：悬停{
颜色：#da98b4；
}
主动的，主动的{
颜色：黑色；
}
导航点{
背景色：#da98b4；
宽度：76px；
高度：8px；
位置：绝对位置；
底部：0；
左：0；
边界半径：25px；
-webkit转换持续时间：0.5s；
过渡时间：0.5s；
}











您可以运行下面的代码段来查看代码是否正常工作


var activeOffset=$（'nav ul.active'）.position（）.left；
//var activeItemWidth=$（'nav ul.active'）.width（）；
$（'document'）.ready（函数（）{
$（'.dot'）.css（'left'，activeOffset）；
});
$（'nav'）.mouseout（函数（）{
$（'.dot'）.css（'left'，activeOffset）
});
$（'nav ul li'）。悬停（函数（）{
var navOffset=$（this）.position（）.left；
//还删除了导航宽度
//var navItemWidth=$（this）.width（）；
$（'.dot'）.css（'left'，navOffset/*+navItemWidth/2*/）；
});
nav{
位置：固定；
顶部：70像素；
左：50%；
宽度：1024px；
文本对齐：居中；
转换：translateX（-50%）translateY（0）；
-webkit转换：translateX（-50%）translateY（0）；
}
导航：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
李国荣{
列表样式：无；
显示：内联块；
流动：隐藏；
}
海军ulli a{
显示：块；
填充：10px 10px；
文字装饰：无；
字号：18px；
位置：相对位置；
颜色：rgba（0,0,0,1）；
/*-webkit转换：translateX（-15%）；
转化：translateX（-15%）*/
边界半径：50px；
/*宽度：130%*/
文本对齐：居中；
-webkit转换持续时间：0.25s；
过渡时间：0.25s；
}
导航ulli a：悬停{
颜色：#da98b4；
}
主动的，主动的{
颜色：黑色；
}
导航点{
背景色：#da98b4；
宽度：76px；
高度：8px；
位置：绝对位置；
底部：0；
左：0；
边界半径：25px；
-webkit转换持续时间：0.5s；
过渡时间：0.5s；
}












var activeOffset=$（'nav ul.active'）.position（）.left；
var activeItemWidth=$（'nav ul.active'）.width（）；
$（'document'）.ready（函数（）{
$（'.dot'）.css({
“左”：activeOffset，
“宽度”：activeItemWidth
});
});
$（'nav'）.mouseout（函数（）{
$（'.dot'）.css({
“左”：activeOffset，
“宽度”：activeItemWidth
});
});
$（'nav ul li'）。悬停（函数（）{
var navOffset=$（this）.position（）.left；
var navItemWidth=$（this）.width（）；
$（'.dot'）.css({
“左”：导航偏移，
“宽度”：navItemWidth
});
});
nav{
位置：固定；
顶部：70像素；
左：50%；
宽度：1024px；
文本对齐：居中；
转换：translateX（-50%）translateY（0）；
-webkit转换：translateX（-50%）translateY（0）