Javascript 如何使用jqueryrain菜单？

我试图将此菜单添加到我的项目中，但当光标不在圆圈上时，li项将消失。 除此之外，我删除了一些图标，所以我只有4个li项目。我如何安排它们，使它们相对于圆对称。 我将感谢你的帮助。 谢谢 图片如下：

---

您只需更改旋转的值即可

.demo{
背景：#99b977；
变换：translate3d（0,0,0）；
}
navbar先生{
宽度：150px；
高度：150像素；
线高：150px；
边界半径：50%；
背景：#fff；
利润率：70像素自动；
位置：相对位置；
光标：指针；
文本对齐：居中；
字号：2.75em；
字体大小：粗体；
颜色：#99b977；
过渡：0.24s 0.2s；
}
.导航栏：悬停{
背景：rgba（255,255,255,0.75）；
}
.导航栏.菜单{
列表样式：无；
填充：10；
保证金：0；
位置：绝对位置；
顶部：-75px；
左：-75px；
边框：150px实心透明；
游标：默认值；
边界半径：50%；
变换：比例（0）；
转换：转换1.4s 0.07s；
z指数：-1；
}
.导航栏：悬停.菜单{
转换：转换0.4s0.08s，z指数0s0.5s；
变换：比例（1）；
z指数：1；
}
.navbar.menu li{
位置：绝对位置；
顶部：-100px；
左：-100px；
变换原点：100px 100px；
过渡：所有0.5s和0.1s；
}
.navbar:悬停。菜单li{
过渡：均为0.6s；
}
.导航栏.菜单李a{
宽度：45px；
高度：45px；
线高：45px；
边界半径：50%；
背景：#fff；
位置：绝对位置；
字体大小：60%；
颜色：#99b977；
过渡：0.6s；
}
.navbar:hover.menu li:n子菜单（1）{
过渡延迟：0.02s；
变换：旋转（45度）；
}
.导航栏：悬停。菜单li:n子菜单（1）a{
过渡延迟：0.04s；
变换：旋转（315度）；
}
.navbar:hover.menu li:n子菜单（2）{
过渡延迟：0.04s；
变换：旋转（125度）；
}
.导航栏：悬停。菜单li:n子菜单（2）a{
过渡延迟：0.08s；
变换：旋转（595度）；
}
.navbar:hover.menu li:n子菜单（3）{
过渡延迟：0.06s；
变换：旋转（165度）；
}
.导航栏：悬停。菜单li:n子菜单（3）a{
过渡延迟：0.12s；
变换：旋转（555度）；
}
.navbar:hover.menu li:n子菜单（4）{
过渡延迟：0.08s；
变换：旋转（205度）；
}
.导航栏：悬停。菜单li:n子菜单（4）a{
过渡延迟：0.16s；
变换：旋转（515度）；
}

菜单风格：演示7
菜单

寻求调试帮助的问题（“为什么此代码不起作用？”）必须包括所需的行为、特定的问题或错误以及在问题本身中重现这些问题所需的最短代码。没有明确问题陈述的问题对其他读者没有用处。请参阅：。我写了问题所在。好的。除此之外，当鼠标不在图标上方时，我如何防止图标消失？如果我理解您的意思，您不希望在圆上方出现动画？如果是这样，当您通过菜单时，您不需要在css中悬停