Html 带有无序列表的浮动按钮

我有一个三部分的问题

悬停时，如何将无序列表（谷歌和Facebook图标）从右向左与其父列表项对齐。（当前，当父列表项悬停时，Google和Facebook图标始终与第一个列表项对齐）

如何将中间的脸谱网图标和谷歌图标放在中间。

当鼠标移动到Facebook或Google图标时，原始无序列表将消失。我怎样才能解决这个问题

下面的代码片段：

*{
填充：0；
保证金：0；
}
.标签容器{
位置：固定；
底部：48px；
右：105px；
显示：表格；
可见性：隐藏；
}
.标签文本{
颜色：#FFF；
背景：rgba（51,51,51,0.5）；
显示：表格单元格；
垂直对齐：中间对齐；
填充：10px；
边界半径：3px；
}
.标签箭头{
显示：表格单元格；
垂直对齐：中间对齐；
颜色：#333；
不透明度：0.5；
}
.浮动{
位置：固定；
宽度：60px；
高度：60px；
底部：40px；
右：40px；
背景色：#F33；
颜色：#FFF；
边界半径：50px；
文本对齐：居中；
盒影：2盒2盒3盒999；
z指数：1000；
动画：机器人到顶部2放松；
}
.ul{
位置：固定；
右：40px；
垫底：20px；
底部：80px；
z指数：100；
}
.ul1{
位置：固定；
右：80px；
垫底：20px；
底部：80px；
z指数：100；
}
李先生{
列表样式：无；
边缘底部：10px；
}
.ul1.li1{
列表样式：无；
边缘底部：20px；
显示：内联块；
}
李安先生{
颜色：#FFF；
边界半径：50px；
文本对齐：居中；
盒影：2盒2盒3盒999；
宽度：30px；
高度：30px；
显示：块；
}
.ul1.li1a{
背景色：#F33；
颜色：#FFF；
边界半径：50px；
文本对齐：居中；
盒影：2盒2盒3盒999；
宽度：30px；
高度：30px；
显示：块；
}
.ul:悬停，.ul1:悬停{
可见性：可见！重要；
不透明度：1！重要；
}
.我的花车{
字体大小：24px；
边缘顶部：18px；
}
a、 菜单共享+.ul，a.menu-share1+.ul1{
可见性：隐藏；
}
a、 菜单共享：hover+.ul，a.menu-share1:hover+.ul1{
能见度：可见；
动画：0.5s内缩放；
}
a、 菜单共享i{
动画：在0.5s内旋转；
}
a、 菜单共享：悬停>i{
动画：旋转0.5s；
}
@从机器人到顶部的关键帧{
0% {
底部：-40px
}
50% {
底部：40px
}
}
@关键帧按比例缩放{
从{
变换：比例（0）；
不透明度：0；
}
到{
变换：比例（1）；
不透明度：1；
}
}
@关键帧沿方向旋转{
从{
变换：旋转（0度）；
}
到{
变换：旋转（360度）；
}
}
@关键帧向外旋转{
从{
变换：旋转（360度）；
}
到{
变换：旋转（0度）；
}
}

试试那个。我重写了一点代码。居中文本元素的主要思想是指定

行高度

等于元素的高度，但不应该有任何填充

*{
填充：0；
保证金：0；
}
.标签容器{
位置：固定；
底部：48px；
右：105px；
显示：表格；
可见性：隐藏；
}
.标签文本{
颜色：#FFF；
背景：rgba（51,51,51,0.5）；
显示：表格单元格；
垂直对齐：中间对齐；
填充：10px；
边界半径：3px；
}
.标签箭头{
显示：表格单元格；
垂直对齐：中间对齐；
颜色：#333；
不透明度：0.5；
}
.浮动{
位置：固定；
宽度：60px；
高度：60px；
底部：40px；
右：40px；
背景色：#F33；
颜色：#FFF；
边界半径：50px；
文本对齐：居中；
线高：60px；
盒影：2盒2盒3盒999；
z指数：1000；
动画：机器人到顶部2放松；
}
.ul{
位置：固定；
右：40px；
垫底：20px；
底部：80px；
z指数：100；
}
.ul1、.ul2{
位置：固定；
右：60px；
垫底：20px；
z指数：100；
右边填充：20px；
}
.ul1{
底部：80px；
}
.ul2{
底部：120px；
}
李先生{
列表样式：无；
边缘底部：10px；
}
.ul1.li1{
列表样式：无；
线高：30px；
显示：内联块；
边缘底部：10px；
}
李安先生{
颜色：#FFF；
边界半径：50px；
文本对齐：居中；
盒影：2盒2盒3盒999；
宽度：30px；
高度：30px；
显示：块；
}
.ul1.li1a{
背景色：#F33；
颜色：#FFF；
边界半径：50px；
文本对齐：居中；
盒影：2盒2盒3盒999；
宽度：30px；
高度：30px；
显示：块；
}
.ul:悬停，.ul1:悬停{
可见性：可见！重要；
不透明度：1！重要；
}
a、 菜单共享+.ul，a.menu-share1+.ul1{
可见性：隐藏；
}
a、 菜单共享：hover+.ul，a.menu-share1:hover+.ul1{
能见度：可见；
动画：0.5s内缩放；
}
a、 菜单共享i{
动画：在0.5s内旋转；
}
a、 菜单共享：悬停>i{
动画：旋转0.5s；
}
@从机器人到顶部的关键帧{
0% {
底部：-40px
}
50% {
底部：40px
}
}
@关键帧按比例缩放{
从{
变换：比例（0）；
不透明度：0；
}
到{
变换：比例（1）；
不透明度：1；
}
}
@关键帧沿方向旋转{
从{
变换：旋转（0度）；
}
到{
变换：旋转（360度）；
}
}
@关键帧向外旋转{
从{
变换：旋转（360度）；
}
到{
变换：旋转（0度）；
}
}