Jquery 如何使用css有效地发布我的导航菜单

我正在为我的第一个官方网站创建一个新的导航菜单，我遇到了一个问题。使用JQuery更改CSS时，导航菜单会移动位置。有人能告诉我一个更好的方法来定位菜单，使它绝对保持中心，并解释思维过程吗？谢谢大家!

**澄清-通过居中，我重新定义了导航菜单在角落中的方式。我不。希望在悬停时填充更改时进行任何填充

下面是我当前的代码

$（文档）.ready（函数（）{
$（“#logo”）.mouseenter（函数（）{
$（'#logode'）.attr（“src”，“csweblogoblack.png”）；
});
$（“#logo”）.mouseleave（函数（）{
$（'#logode'）.attr（“src”，“csweblogo.png”）；
});
$（'.menu项a'）.mouseenter（函数（）{
$（this.css（“padding top”，“30px”）；
$（this.css（“填充底部”、“30px”）；
});
$（'.menu item a'）.mouseleave（function（）{
$（this.css（“padding top”，“20px”）；
$（this.css（“填充底部”、“20px”）；
});
});
/*配色方案：#000000#263248#7E8AA2#FFFFFF#FF9800*/
html，
身体{
宽度：100%；
身高：100%；
填充：0px；
边际：0px；
}
保险商实验室{
列表样式类型：无；
}
a{
文字装饰：无；
}
导航{
位置：绝对位置；
文本对齐：居中；
宽度：900px；
盒影：10px 10px 20px#8888888；
-ms变换：旋转（-45度）；
-webkit变换：旋转（-45度）；
变换：旋转（-45度）；
顶部：-70px；
左：-310px；
}
.菜单项a{
颜色：白色；
文本转换：大写；
字体系列：“Incolata”，单空格；
字体大小：40px；
字体大小：粗体；
显示：表格单元格；
填充：20px；
显示：内联块；
}
.标志a{
颜色：白色；
文本转换：大写；
字体系列：“Incolata”，单空格；
字体大小：40px；
字体大小：粗体；
显示：表格单元格；
填充：20px；
显示：内联块；
}
.菜单项a：悬停{
颜色：黑色；
}
#标志img{
宽度：100px；
高度：100px；
}
#标志a{
填充：70px 20%10px；
背景色：黑色；
}
#标志a：悬停{
背景色：#FFFFFF；
}
#家a{
背景色：#263248；
左：30%；
右：30%；
}
#联系{
背景色：#7E8AA2；
左：40%；
右：40%；
}
#大约{
背景色：#FF9800；
左：45%；
右：45%；
}

克里斯·斯卡利投资组合
好的，通过将导航高度更改为0px解决了问题。不知道为什么会这样。。。。但是似乎工作得很好。
为什么要使用JavaScript？也许这有助于澄清您的问题：