Javascript CSS饼图切片无法悬停

我最近一直在尝试css派菜单。一切正常，除了如果切片超过9个部分，则悬停不起作用。有关更清晰的图片，请访问

以下是我的html：

<div class="menu">
    <div class="menu-btn"><i class="fa fa-bars"></i></div>
</div>
<div class="menu-items">
    <div class="menu-item">
        <div class="menu-item-content active"><i class="fa fa-home"></i></div>
    </div>
    <div class="menu-item">
        <div class="menu-item-content"><i class="fa fa-user"></i></div>
    </div>
    <div class="menu-item">
        <div class="menu-item-content"><i class="fa fa-sliders"></i></div>
    </div>
    <div class="menu-item">
        <div class="menu-item-content"><i class="fa fa-envelope"></i></div>
    </div>
    <div class="menu-item">
        <div class="menu-item-content"><i class="fa fa-cog"></i></div>
    </div>
    <div class="menu-item">
        <div class="menu-item-content"><i class="fa fa-archive"></i></div>
    </div>
    <div class="menu-item">
        <div class="menu-item-content"><i class="fa fa-calendar"></i></div>
    </div>
    <div class="menu-item">
        <div class="menu-item-content"><i class="fa fa-comments"></i></div>
    </div>
    <div class="menu-item">
        <div class="menu-item-content"><i class="fa fa-suitcase"></i></div>
    </div>
    <div class="menu-item">
        <div class="menu-item-content"><i class="fa fa-database"></i></div>
    </div>
    <div class="menu-item">
        <div class="menu-item-content"><i class="fa fa-graduation-cap"></i></div>
    </div>
    <div class="menu-item">
        <div class="menu-item-content"><i class="fa fa-newspaper-o"></i></div>
    </div>
    <div class="menu-item">
        <div class="menu-item-content"><i class="fa fa-shopping-bag"></i></div>
    </div>
    <div class="menu-item">
        <div class="menu-item-content"><i class="fa fa-send"></i></div>
    </div>
    <div class="menu-item">
        <div class="menu-item-content"><i class="fa fa-support"></i></div>
    </div>
    <div class="menu-item">
        <div class="menu-item-content"><i class="fa fa-question-circle-o"></i></div>
    </div>
</div>

---

如果可能，还有另一个问题。如果您可以在演示中观察到，每4个部分后，边框就会丢失。请帮我解决这些问题

将

菜单项更改为

.menu-item {
    position: absolute;
    width: 200px;
    height: 200px;
    left: 0px;
    top: 0px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    -o-border-radius: 100px;
    border-radius: 100px;
    clip: rect(0px, 138px, 100px, 100px);
    cursor: pointer;
}


@导入url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);
html，
身体{
颜色：#000；
}
.菜单{
位置：固定；
左：-60px；
顶部：-60px；
z指数：10；
宽度：120px；
高度：120px；
边界半径：50%；
边框：0.01em实心#455A64；
背景色：#3F51B5；
光标：指针；
}
.菜单.菜单btn{
位置：绝对位置；
底部：30px；
右：30px；
颜色：#fff；
字体大小：20px；
过渡：0.1s线性所有；
}
.菜单：悬停.菜单btn{
字体大小：24px；
右：28px；
底部：28px；
}
.菜单项{
位置：固定；
顶部：100px；
左：100px；
z指数：9；
宽度：200px；
高度：200px；
颜色：#fff；
背景：透明；
边界半径：50%；
/*显示：无*/
}
.菜单项{
位置：绝对位置；
宽度：200px；
高度：200px；
左：0px；
顶部：0px；
-moz边界半径：100px；
-webkit边界半径：100px；
-o-边界半径：100px；
边界半径：100px；
剪辑：矩形（0px，138px，100px，100px）；
光标：指针；
}
.菜单项：第n个子项（1）{
-webkit变换：旋转（90度）；
-moz变换：旋转（90度）；
-o变换：旋转（90度）；
变换：旋转（90度）；
}
.菜单项：第n个子项（2）{
-webkit变换：旋转（112.5度）；
-moz变换：旋转（112.5度）；
-o变换：旋转（112.5度）；
变换：旋转（112.5度）；
}
.菜单项：第n个子项（3）{
-webkit变换：旋转（135度）；
-moz变换：旋转（135度）；
-o变换：旋转（135度）；
变换：旋转（135度）；
}
.菜单项：第n个子项（4）{
-webkit变换：旋转（157.5度）；
-moz变换：旋转（157.5度）；
-o变换：旋转（157.5度）；
变换：旋转（157.5度）；
}
.菜单项：第n个子项（5）{
-webkit变换：旋转（180度）；
-moz变换：旋转（180度）；
-o变换：旋转（180度）；
变换：旋转（180度）；
}
.菜单项：第n个子项（6）{
-webkit变换：旋转（202.5度）；
-moz变换：旋转（202.5度）；
-o变换：旋转（202.5度）；
变换：旋转（202.5度）；
}
.菜单项：第n个子项（7）{
-webkit变换：旋转（225度）；
-moz变换：旋转（225度）；
-o变换：旋转（225度）；
变换：旋转（225度）；
}
.菜单项：第n个子项（8）{
-webkit变换：旋转（247.5度）；
-moz变换：旋转（247.5度）；
-o变换：旋转（247.5度）；
变换：旋转（247.5度）；
}
.菜单项：第n个子项（9）{
-webkit变换：旋转（270度）；
-moz变换：旋转（270度）；
-o变换：旋转（270度）；
变换：旋转（270度）；
}
.菜单项：第n个子项（10）{
-webkit变换：旋转（292.5度）；
-moz变换：旋转（292.5度）；
-o变换：旋转（292.5度）；
变换：旋转（292.5度）；
}
.菜单项：第n个子项（11）{
-webkit变换：旋转（315度）；
-moz变换：旋转（315度）；
-o变换：旋转（315度）；
变换：旋转（315度）；
}
.菜单项：第n个子项（12）{
-webkit变换：旋转（337.5度）；
-moz变换：旋转（337.5度）；
-o变换：旋转（337.5度）；
变换：旋转（337.5度）；
}
.菜单项：第n个子项（13）{
-webkit变换：旋转（360度）；
-moz变换：旋转（360度）；
-o变换：旋转（360度）；
变换：旋转（360度）；
}
.菜单项：第n个子项（14）{
-webkit变换：旋转（382.5度）；
-moz变换：旋转（382.5度）；
-o变换：旋转（382.5度）；
变换：旋转（382.5度）；
}
.菜单项：第n个子项（15）{
-webkit变换：旋转（405度）；
-moz变换：旋转（405度）；
-o变换：旋转（405度）；
变换：旋转（405度）；
}
.菜单项：第n个子项（16）{
-webkit变换：旋转（427.5度）；
-moz变换：旋转（427.5度）；
-o变换：旋转（427.5度）；
变换：旋转（427.5度）；
}
.菜单项内容{
位置：绝对位置；
宽度：200px；
高度：200px；
-moz边界半径：100px；
-webkit边界半径：100px；
-o-边界半径：100px；
边界半径：100px；
剪辑：rect（0px，100px，200px，0px）；
背景色：#1b458b；
-webkit变换：旋转（22.5度）；
-moz变换：旋转（22.5度）；
-o变换：旋转（22.5度）；
变换：旋转（22.5度）；
}
.菜单项.菜单项内容i{
位置：绝对位置；
顶部：12px；
左：77px；
字体大小：16px；
变换：旋转（180度）；
}
.菜单项.菜单项内容：悬停，
.菜单项.活动{
背景色：#1976D2！重要；
}

悬停不起作用，因为您使用的是200x200px的正方形，它们相互重叠，因此底部的正方形在顶部的正方形之下。这种设计非常适合SVG。@伊万科瓦切夫有什么建议吗？@Paulie_D我对SVG一无所知：（不管怎么说，除了这些问题，它工作得很好。要么像Paulie建议的那样使用SVG，要么你可以尝试放置和旋转较小的矩形，例如200x50px，这样它们的中心几乎没有重叠。你也可以在图标下放置较大的透明div并触发它们的悬停，但饼图的中心不会触发。主假设html dom元素是矩形的，这就是为什么SVG在这里是更好的方法，因为您可以有区域。另一个建议是使用圆弧来构建项目。谢谢，它终于起作用了：）但是你也能帮我解决边界问题吗？我花了将近一个半小时才找到解决方案。边界有什么问题？每4个部分后，边界就会丢失：（试试这个
。菜单项-
.menu-item {
    position: absolute;
    width: 200px;
    height: 200px;
    left: 0px;
    top: 0px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    -o-border-radius: 100px;
    border-radius: 100px;
    clip: rect(0px, 138px, 100px, 100px);
    cursor: pointer;
}