代码演示（复制可以直接使用）##

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>扇形导航</title>
   <style>
       *{
           margin: 0;
           padding: 0;
       }
       a {
           text-align: right;
           text-decoration: none;
           color: #000 !important;
       }
       ul {
           list-style: none;
       }
       .menu {
           width: 100px;
           height: 100px;
           border-radius:0 0 100px 0; 
           background-color: #ddd;
           position: relative;
           left:100px;
           top:100px;
           
       }
       .menu ul {
           position: absolute;
           width: 0;
           height: 0;
           left: 0;
           top: 0;
       }
       .menu ul li {
           width: 0;
           height: 0;
       }

       ul.menu1 {
           width: 100px;
           height: 100px;
           overflow: hidden;
           z-index: 3;
       }
       .menu1>li>a{
           display: block;
           width: 100px;
           height: 100px;
           z-index: 3;
           position: absolute;
           border-radius:0 0 100px 0; 
           background-color: #666;
       }
       .menu1:hover {
           width: 300px;
           height: 300px;
       }
       .menu1:hover>li>a{
           background-color: red;
       }
       .menu1:hover .menu2{
           transform: rotate(0);
           transition: all 1s;
       }
       .menu1>li .menu2>li:hover>a{
           background-color: red;
       }
       
       .menu2{
           transform: rotate(90deg);
       }
       .menu2>li>a{
           position: absolute;
           width: 200px;
           height: 200px;
           border-radius: 0 0 300px 0;
           transform-origin:left top; 
           z-index: 2;
       }
       .menu2>li:nth-child(1)>a{
           background-color: #ddd;
           transform: rotate(0deg);
           
           
       }
       .menu2>li:nth-child(2)>a{
           background-color: #ccc;
           transform: rotate(15deg);
           
       }
       .menu2>li:nth-child(3)>a{
           background-color: #bbb;
           transform: rotate(30deg);
           
       }
       .menu2>li:nth-child(4)>a{
           background-color: #aaa;
           transform: rotate(45deg);
           
       }
       .menu2>li:nth-child(5)>a{
           background-color: #999;
           transform: rotate(60deg);
           
       }
       .menu2>li:nth-child(6)>a{
           background-color: #888;
           transform: rotate(75deg);

       }

       .menu2>li:hover .menu3{
           transform: rotate(0deg);
           transition: all 1s;
       }
       .menu1 .menu2 .menu3 li:hover a{
           background-color: #f00;
       }
       .menu3 {
           transform: rotate(90deg);
           z-index: -100;
       }

       .menu3>li>a{
           width: 300px;
           height: 300px;
           border-radius: 0 0 300px 0;
           position: absolute;
           transform-origin:left top; 
       }
       .menu3>li:nth-child(1)>a{
           transform: rotate(0deg);
           background-color: #999;
       }
       .menu3>li:nth-child(2)>a{
           transform: rotate(30deg);
           background-color: #888;
       }
       .menu3>li:nth-child(3)>a{
           transform: rotate(60deg);
           background-color: #777;
       }

   </style>
</head>
<body>
   <div class="menu">
       <div class="menu0">
            <ul class="menu1">
               <li>
                   <a href="#">home</a>
                   <ul class="menu2">
                       
                       <li>
                           <a href="#">二级导航</a>
                           <ul class="menu3">
                               <li><a href="#">三级导航</a></li>
                               <li><a href="#">三级导航</a></li>
                               <li><a href="#">三级导航</a></li>
                           </ul>
                       </li>
                       <li>
                           <a href="#">二级导航</a>
                           <ul class="menu3">
                               <li><a href="#">三级导航</a></li>
                               <li><a href="#">三级导航</a></li>
                               <li><a href="#">三级导航</a></li>
                           </ul>
                       </li>
                       <li>
                           <a href="#">二级导航</a>
                           <ul class="menu3">
                               <li><a href="#">三级导航</a></li>
                               <li><a href="#">三级导航</a></li>
                               <li><a href="#">三级导航</a></li>
                           </ul>
                       </li>
                       <li>
                           <a href="#">二级导航</a>
                           <ul class="menu3">
                               <li><a href="#">三级导航</a></li>
                               <li><a href="#">三级导航</a></li>
                               <li><a href="#">三级导航</a></li>
                           </ul>
                       </li>
                       <li>
                           <a href="#">二级导航</a>
                           <ul class="menu3">
                               <li><a href="#">三级导航</a></li>
                               <li><a href="#">三级导航</a></li>
                               <li><a href="#">三级导航</a></li>
                           </ul>
                       </li>
                       <li>
                           <a href="#">二级导航</a>
                           <ul class="menu3">
                               <li><a href="#">三级导航</a></li>
                               <li><a href="#">三级导航</a></li>
                               <li><a href="#">三级导航</a></li>
                           </ul>
                       </li>
                   </ul>
               </li>
           </ul>
       </div>
   </div>
</body>
</html>