08.gif
代码演示（复制可以直接使用）##
<!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>
