Drop down menu 将社交图标悬停并居中对齐“我的菜单栏”中的下拉列表

你能告诉我，当我把鼠标悬停在社交媒体图标上时，如何改变它们的颜色吗？以及如何将菜单栏中的下拉列表居中对齐

这是我的网站链接：www.theBIY.blogspot.com（仍在建设中）

多谢各位 （以下是我使用的HTML/CSS代码）

/*net CSS启动*/
#梅诺酒店{
宽度：100%；
高度：60px；
显示：块；
填充：0；
利润率：0.20px0；
z指数：100；
顶部：0px；
左：0px；
位置：固定；
盒影：2PX2PX5PX#28b418；
-莫兹盒阴影：2PX2PX5PX#28b418；
-网络工具包盒阴影：2PX2PX5PX#28b418；
-goog-ms-box-shadow:2px 2px 5px#28b418；
背景：rgba（250250250,0.95）；
}
#ks-1{
浮动：左；
宽度：1000px；
高度：40px；
显示：块；
填充：0；
左边距：10px；
边际上限：0px；
}
#ks-1 ul{
浮动：左；
保证金：0；
填充：0；
边框：#ffffff 1px隐藏；
}
#ks-1李{
浮动：左；
列表样式：无；
线高：37px；
保证金：0；
填充：0背景：#660252；
边框：#660252 1px隐藏；
}
#ks-1李a，
#ks-1李a：链接{
颜色：#660252；
显示：块；
保证金：0；
字体系列：“尼克西一号”，草书；
字体大小：20px；
填充：10px；
文字装饰：无；
边界：#181818 1px隐藏；
线高：25px；
}
#ks-1李a：悬停，
#ks-1李a：主动，
#ks-mano1.当前页面\项目a{
颜色：#009F9A；
填充：10px；
背景：rgba（250250250,0）；
-webkit过渡：所有.6s轻松；
-moz过渡：所有.6秒轻松；
-o型过渡：所有。6秒缓解；
-ms过渡：全部.6s轻松；
过渡：全部。6秒轻松；
边框：#6CF 1px隐藏；
}
#ks-mano1李丽娜，
#ks-mano1李娜：链接，
#李丽娜：参观了{
字体大小：16px；
文本对齐：居中；
背景:#660252；
颜色：#fff；
宽度：150px；
保证金：0；
填充：0px 10px；
线高：30px；
位置：相对位置；
边框：#660252 1px实心；
}
#ks-mano1李莉a：悬停，
#ks-mano1 li a：活动{
颜色：#fff；
边框：#660252 1px实心；
背景:#660252；
-webkit过渡：所有.6s轻松；
-moz过渡：所有.6秒轻松；
-o型过渡：所有。6秒缓解；
-ms过渡：全部.6s轻松；
过渡：全部。6秒轻松；
}
#ks-1 li ul{
z指数：9999；
位置：绝对位置；
左：-999em；
高度：自动；
宽度：170px；
边际：0px；
填充：0px
}
#ks-mano1 li：悬停ul，
#ks-mano1李莉：悬停ul，
#ks-mano1 li:悬停ul，
#ks-mano1 li.SFUL，
#topks-mano1 li li.sfhover ul，
#topks-mano1 li.sfhover ul{
左：自动
}
#ks-1李：悬停，
#ks-mano1 li.sfhover{
位置：静态；
}
#ks ico{
浮动：对；
宽度：250px；
填充：0px 0px；
右边距：50px；
}
#ks ico img{
左边距：6px；
边缘顶部：15px；
高度：28px；
宽度：28px；
边界：无；
-webkit过渡：所有.6s轻松；
-moz过渡：所有.6秒轻松；
-o型过渡：所有。6秒缓解；
-ms过渡：全部.6s轻松；
过渡：全部。6秒轻松；
}
#ks ico img：悬停{
不透明度：.8；
-webkit过渡：所有.6s轻松；
-moz过渡：所有.6秒轻松；
-o型过渡：所有。6秒缓解；
-ms过渡：全部.6s轻松；
过渡：全部。6秒轻松；
}
/*crawlist.net CSS结束*/

人们通常使用两个图标，两种颜色完全相同，一个隐藏（通常不透明度为0），另一个可见。将鼠标悬停在其中一个上，不透明度为0，另一个为1，带有一些css3动画

如果您需要进一步的帮助，您必须向我们提供您尝试过的实际代码

至于改变颜色，你应该这样做（这里有很多事情要解决，但这是基本的）-你有一个跨度，有两个图像，一个是“活动”，悬停你改变不透明度

这将如下所示：（仅为第一个图标制作：）

对于对齐，我希望我能理解，只需添加页边顶部~8px

/*crawlist.net CSS启动*/
#梅诺酒店{
宽度：100%；
高度：60px；
显示：块；
填充：0；
利润率：0.20px0；
z指数：100；
顶部：0px；
左：0px；
位置：固定；
盒影：2PX2PX5PX#28b418；
-莫兹盒阴影：2PX2PX5PX#28b418；
-网络工具包盒阴影：2PX2PX5PX#28b418；
-goog-ms-box-shadow:2px 2px 5px#28b418；
背景：rgba（250250250,0.95）；
}
#ks-1{
浮动：左；
宽度：1000px；
高度：40px；
显示：块；
填充：0；
左边距：10px；
边际上限：0px；
}
#ks-1 ul{
浮动：左；
保证金：0；
填充：0；
边框：#ffffff 1px隐藏；
}
#ks-1李{
浮动：左；
列表样式：无；
线高：37px；
边缘顶部：8px；
填充：0背景：#660252；
边框：#660252 1px隐藏；
}
#ks-1李a，
#ks-1李a：链接{
颜色：#660252；
显示：块；
保证金：0；
字体系列：“尼克西一号”，草书；
字体大小：20px；
填充：10px；
文字装饰：无；
边界：#181818 1px隐藏；
线高：25px；
}
#ks-1李a：悬停，
#ks-1李a：主动，
#ks-mano1.当前页面\项目a{
颜色：#009F9A；
填充：10px；
背景：rgba（250250250,0）；
-webkit过渡：所有.6s轻松；
-moz过渡：所有.6秒轻松；
-o型过渡：所有。6秒缓解；
-ms过渡：全部.6s轻松；
过渡：