二級選單----css3特效，無jQuery
css部分：
*{
margin: 0;
padding: 0;
list-style: none;
}
.container{
width: 100vw;
height: 100vh;
background: #222222;
display: flex;
justify-content: center;
align-items: center;
}
.nav{
width: 15vh;
height: 15vh;
line-height: 15vh;
background: #FFFFFF;
border-radius: 100%;
font-size: 30px;
color: #548B54;
text-align: center;
position: relative;
}
.nav .ul{
border: 11.5vh solid transparent;
position: absolute;
top: -4vh;
left: -4vh;
transform: scale(0);
transition: transform 1.3s .4s;
}
.nav .ul li{
width: 5vh;
height: 5vh;
line-height: 5vh;
background: #FFFFFF;
border-radius: 100%;
font-size: 20px;
position: absolute;
top: -11.2vh;
left: -11.2vh;
transform-origin: 100px 100px;
transition: all .4s .4s;
}
.nav:hover{
background: rgba(255,255,255,.75);
}
.nav:hover .ul{
transform: scale(1);
transition: transform .4s .1s ;
}
.nav:hover .ul li{
transition-delay:0.02s;
}
.nav:hover .ul li:nth-of-type(1){
transform: rotate(0deg);
}
.nav:hover .ul li:nth-of-type(2){
transform: rotate(40deg);
}
.nav:hover .ul li:nth-of-type(3){
transform: rotate(80deg);
}
.nav:hover .ul li:nth-of-type(4){
transform: rotate(120deg);
}
.nav:hover .ul li:nth-of-type(5){
transform: rotate(160deg);
}
.nav:hover .ul li:nth-of-type(6){
transform: rotate(200deg);
}
.nav:hover .ul li:nth-of-type(7){
transform: rotate(240deg);
}
.nav:hover .ul li:nth-of-type(8){
transform: rotate(280deg);
}
.nav:hover .ul li:nth-of-type(9){
transform: rotate(320deg);
}
html部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/index2.css"/>
</head>
<body>
<div class="container">
<div class="nav">
選單
<div class="ul">
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
<li><a href="">7</a></li>
<li><a href="">8</a></li>
<li><a href="">9</a></li>
</div>
</div>
</div>
</body>
</html>