CSS餅切片無法懸停

Question

我最近一直在嘗試在css餅圖菜單上工作。一切正常，除了懸停不起作用，如果切片超過9部分。有關更清晰的圖片，請訪問demo。

以下是我的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> 

這是我的CSS：

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css); 
html, 
body { 
    color: #000; 
} 

.menu { 
    position: fixed; 
    left: -60px; 
    top: -60px; 
    z-index: 10; 
    width: 120px; 
    height: 120px; 
    border-radius: 50%; 
    border:0.01em solid #455A64; 
    background-color: #3F51B5; 
    cursor:pointer; 
} 

.menu .menu-btn { 
    position: absolute; 
    bottom: 30px; 
    right: 30px; 
    color:#fff; 
    font-size:20px; 
    transition:0.1s linear all; 
} 
.menu:hover .menu-btn{ 
    font-size:24px; 
    right:28px; 
    bottom: 28px; 
} 

.menu-items { 
    position: fixed; 
    top: 100px; 
    left: 100px; 
    z-index: 9; 
    width: 200px; 
    height: 200px; 
    color:#fff; 
    background: transparent; 
    border-radius: 50%; 
    /*display:none;*/ 
} 

.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, 200px, 200px, 100px); 
    cursor:pointer; 
} 

.menu-item:nth-child(1) { 
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg); 
    -o-transform: rotate(90deg); 
    transform: rotate(90deg); 
} 
.menu-item:nth-child(2) { 
    -webkit-transform: rotate(112.5deg); 
    -moz-transform: rotate(112.5deg); 
    -o-transform: rotate(112.5deg); 
    transform: rotate(112.5deg); 
} 
.menu-item:nth-child(3) { 
    -webkit-transform: rotate(135deg); 
    -moz-transform: rotate(135deg); 
    -o-transform: rotate(135deg); 
    transform: rotate(135deg); 
} 
.menu-item:nth-child(4) { 
    -webkit-transform: rotate(157.5deg); 
    -moz-transform: rotate(157.5deg); 
    -o-transform: rotate(157.5deg); 
    transform: rotate(157.5deg); 
} 
.menu-item:nth-child(5) { 
    -webkit-transform: rotate(180deg); 
    -moz-transform: rotate(180deg); 
    -o-transform: rotate(180deg); 
    transform: rotate(180deg); 
} 
.menu-item:nth-child(6) { 
    -webkit-transform: rotate(202.5deg); 
    -moz-transform: rotate(202.5deg); 
    -o-transform: rotate(202.5deg); 
    transform: rotate(202.5deg); 
} 
.menu-item:nth-child(7) { 
    -webkit-transform: rotate(225deg); 
    -moz-transform: rotate(225deg); 
    -o-transform: rotate(225deg); 
    transform: rotate(225deg); 
} 
.menu-item:nth-child(8) { 
    -webkit-transform: rotate(247.5deg); 
    -moz-transform: rotate(247.5deg); 
    -o-transform: rotate(247.5deg); 
    transform: rotate(247.5deg); 
} 
.menu-item:nth-child(9) { 
    -webkit-transform: rotate(270deg); 
    -moz-transform: rotate(270deg); 
    -o-transform: rotate(270deg); 
    transform: rotate(270deg); 
} 
.menu-item:nth-child(10) { 
    -webkit-transform: rotate(292.5deg); 
    -moz-transform: rotate(292.5deg); 
    -o-transform: rotate(292.5deg); 
    transform: rotate(292.5deg); 
} 
.menu-item:nth-child(11) { 
    -webkit-transform: rotate(315deg); 
    -moz-transform: rotate(315deg); 
    -o-transform: rotate(315deg); 
    transform: rotate(315deg); 
} 
.menu-item:nth-child(12) { 
    -webkit-transform: rotate(337.5deg); 
    -moz-transform: rotate(337.5deg); 
    -o-transform: rotate(337.5deg); 
    transform: rotate(337.5deg); 
} 
.menu-item:nth-child(13) { 
    -webkit-transform: rotate(360deg); 
    -moz-transform: rotate(360deg); 
    -o-transform: rotate(360deg); 
    transform: rotate(360deg); 
} 
.menu-item:nth-child(14) { 
    -webkit-transform: rotate(382.5deg); 
    -moz-transform: rotate(382.5deg); 
    -o-transform: rotate(382.5deg); 
    transform: rotate(382.5deg); 
} 
.menu-item:nth-child(15) { 
    -webkit-transform: rotate(405deg); 
    -moz-transform: rotate(405deg); 
    -o-transform: rotate(405deg); 
    transform: rotate(405deg); 
} 
.menu-item:nth-child(16) { 
    -webkit-transform: rotate(427.5deg); 
    -moz-transform: rotate(427.5deg); 
    -o-transform: rotate(427.5deg); 
    transform: rotate(427.5deg); 
} 
.menu-item-content { 
    position: absolute; 
    width: 200px; 
    height: 200px; 
    -moz-border-radius: 100px; 
    -webkit-border-radius: 100px; 
    -o-border-radius: 100px; 
    border-radius: 100px; 
    clip: rect(0px, 100px, 200px, 0px); 
    background-color: #1b458b; 
    -webkit-transform: rotate(22.5deg); 
    -moz-transform: rotate(22.5deg); 
    -o-transform: rotate(22.5deg); 
    transform: rotate(22.5deg); 
} 
.menu-item .menu-item-content i{ 
    position:absolute; 
    top:12px; 
    left:77px; 
    font-size: 16px; 
    transform: rotate(180deg); 
} 

.menu-item .menu-item-content:hover, .menu-item .active { 
    background-color : #1976D2 !important; 
} 

如果可能的話，還有另一個問題。如果您可以在演示中觀察，每隔4個部分後邊框缺失。請幫助我解決這些問題。

Answer 1

更改menu-item類

.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; 
} 

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css); 
 
html, 
 
body { 
 
    color: #000; 
 
} 
 

 
.menu { 
 
    position: fixed; 
 
    left: -60px; 
 
    top: -60px; 
 
    z-index: 10; 
 
    width: 120px; 
 
    height: 120px; 
 
    border-radius: 50%; 
 
    border: 0.01em solid #455A64; 
 
    background-color: #3F51B5; 
 
    cursor: pointer; 
 
} 
 

 
.menu .menu-btn { 
 
    position: absolute; 
 
    bottom: 30px; 
 
    right: 30px; 
 
    color: #fff; 
 
    font-size: 20px; 
 
    transition: 0.1s linear all; 
 
} 
 

 
.menu:hover .menu-btn { 
 
    font-size: 24px; 
 
    right: 28px; 
 
    bottom: 28px; 
 
} 
 

 
.menu-items { 
 
    position: fixed; 
 
    top: 100px; 
 
    left: 100px; 
 
    z-index: 9; 
 
    width: 200px; 
 
    height: 200px; 
 
    color: #fff; 
 
    background: transparent; 
 
    border-radius: 50%; 
 
    /*display:none;*/ 
 
} 
 

 
.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; 
 
} 
 

 
.menu-item:nth-child(1) { 
 
    -webkit-transform: rotate(90deg); 
 
    -moz-transform: rotate(90deg); 
 
    -o-transform: rotate(90deg); 
 
    transform: rotate(90deg); 
 
} 
 

 
.menu-item:nth-child(2) { 
 
    -webkit-transform: rotate(112.5deg); 
 
    -moz-transform: rotate(112.5deg); 
 
    -o-transform: rotate(112.5deg); 
 
    transform: rotate(112.5deg); 
 
} 
 

 
.menu-item:nth-child(3) { 
 
    -webkit-transform: rotate(135deg); 
 
    -moz-transform: rotate(135deg); 
 
    -o-transform: rotate(135deg); 
 
    transform: rotate(135deg); 
 
} 
 

 
.menu-item:nth-child(4) { 
 
    -webkit-transform: rotate(157.5deg); 
 
    -moz-transform: rotate(157.5deg); 
 
    -o-transform: rotate(157.5deg); 
 
    transform: rotate(157.5deg); 
 
} 
 

 
.menu-item:nth-child(5) { 
 
    -webkit-transform: rotate(180deg); 
 
    -moz-transform: rotate(180deg); 
 
    -o-transform: rotate(180deg); 
 
    transform: rotate(180deg); 
 
} 
 

 
.menu-item:nth-child(6) { 
 
    -webkit-transform: rotate(202.5deg); 
 
    -moz-transform: rotate(202.5deg); 
 
    -o-transform: rotate(202.5deg); 
 
    transform: rotate(202.5deg); 
 
} 
 

 
.menu-item:nth-child(7) { 
 
    -webkit-transform: rotate(225deg); 
 
    -moz-transform: rotate(225deg); 
 
    -o-transform: rotate(225deg); 
 
    transform: rotate(225deg); 
 
} 
 

 
.menu-item:nth-child(8) { 
 
    -webkit-transform: rotate(247.5deg); 
 
    -moz-transform: rotate(247.5deg); 
 
    -o-transform: rotate(247.5deg); 
 
    transform: rotate(247.5deg); 
 
} 
 

 
.menu-item:nth-child(9) { 
 
    -webkit-transform: rotate(270deg); 
 
    -moz-transform: rotate(270deg); 
 
    -o-transform: rotate(270deg); 
 
    transform: rotate(270deg); 
 
} 
 

 
.menu-item:nth-child(10) { 
 
    -webkit-transform: rotate(292.5deg); 
 
    -moz-transform: rotate(292.5deg); 
 
    -o-transform: rotate(292.5deg); 
 
    transform: rotate(292.5deg); 
 
} 
 

 
.menu-item:nth-child(11) { 
 
    -webkit-transform: rotate(315deg); 
 
    -moz-transform: rotate(315deg); 
 
    -o-transform: rotate(315deg); 
 
    transform: rotate(315deg); 
 
} 
 

 
.menu-item:nth-child(12) { 
 
    -webkit-transform: rotate(337.5deg); 
 
    -moz-transform: rotate(337.5deg); 
 
    -o-transform: rotate(337.5deg); 
 
    transform: rotate(337.5deg); 
 
} 
 

 
.menu-item:nth-child(13) { 
 
    -webkit-transform: rotate(360deg); 
 
    -moz-transform: rotate(360deg); 
 
    -o-transform: rotate(360deg); 
 
    transform: rotate(360deg); 
 
} 
 

 
.menu-item:nth-child(14) { 
 
    -webkit-transform: rotate(382.5deg); 
 
    -moz-transform: rotate(382.5deg); 
 
    -o-transform: rotate(382.5deg); 
 
    transform: rotate(382.5deg); 
 
} 
 

 
.menu-item:nth-child(15) { 
 
    -webkit-transform: rotate(405deg); 
 
    -moz-transform: rotate(405deg); 
 
    -o-transform: rotate(405deg); 
 
    transform: rotate(405deg); 
 
} 
 

 
.menu-item:nth-child(16) { 
 
    -webkit-transform: rotate(427.5deg); 
 
    -moz-transform: rotate(427.5deg); 
 
    -o-transform: rotate(427.5deg); 
 
    transform: rotate(427.5deg); 
 
} 
 

 
.menu-item-content { 
 
    position: absolute; 
 
    width: 200px; 
 
    height: 200px; 
 
    -moz-border-radius: 100px; 
 
    -webkit-border-radius: 100px; 
 
    -o-border-radius: 100px; 
 
    border-radius: 100px; 
 
    clip: rect(0px, 100px, 200px, 0px); 
 
    background-color: #1b458b; 
 
    -webkit-transform: rotate(22.5deg); 
 
    -moz-transform: rotate(22.5deg); 
 
    -o-transform: rotate(22.5deg); 
 
    transform: rotate(22.5deg); 
 
} 
 

 
.menu-item .menu-item-content i { 
 
    position: absolute; 
 
    top: 12px; 
 
    left: 77px; 
 
    font-size: 16px; 
 
    transform: rotate(180deg); 
 
} 
 

 
.menu-item .menu-item-content:hover, 
 
.menu-item .active { 
 
    background-color: #1976D2 !important; 
 
}

<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>