HTML部分

<div class="menu">
		<div class="window">
			<ul class="p1">
				<li class="s1"><a href="#">菜单</a>
					<ul class="p2">
						<li class="s2">
							<a href="#"><span>首页</span></a>
						</li>
						<li class="s2">
							<a href="#"><span>设置</span></a>
						</li>
						<li class="s2">
							<a href="#"><span>工具</span></a>
						</li>
						<li class="s2">
							<a href="#"><span>查找</span></a>
						</li>
						<li class="s2">
							<a href="#"><span>帮助</span></a>
						</li>
						<li class="s2">
							<a href="#"><span>关于</span></a>
						</li>
					</ul>
				</li>
			</ul>
		</div>
	</div>

CSS部分

<style type="text/css">
		*{margin: 0;padding: 0;}
		body{
			margin: 0;padding: 0;
			background: #b1b1b1;
			font-size: 14px;
			color:#000;
		}
		.menu{
			width:100px;height:100px; 
			margin:0px 0px 250px 0px;
			position:relative;
			z-index:100;
		}
		.menu ul{
			list-style:none; 
			position:absolute;
			left:0;top:0;
			width:0; height:0;
		}
		.menu ul li{
			border-radius:0 0 300px 0; 
			width:0; height:0;
		}
		.menu ul li a{
			color:#000; 
			text-decoration:none;
			text-align:center;
			box-shadow:-5px 5px 5px rgba(0,0,0,0.5);
			transform-origin:0 0;
		}
		.menu ul.p1 li{
			position:absolute;
			left:0;top:0;
		}
		.menu ul.p2{
			z-index: -1;
		}
		.menu li.s1 > a{
			position:absolute;
			display:block;
			width:100px;height:100px;
			background:#c8c8c8;
			border-radius:0 0 100px 0;
		}
		.menu li.s2 > a {
			position:absolute;
			display:block;
			width:100px;height:200px;
			padding-left:100px;
			background:#ddd;
			border-radius:0 0 200px 0;
		}
		.menu ul ul {
			transform-origin:0 0;
			transform:rotate(90deg);
			transition:1s;
		}
		.menu li.s2:nth-child(6) > a{
			background:#888;
			transform:rotate(75deg);
		}
		.menu li.s2:nth-child(5) > a{
			background:#999;
			transform:rotate(60deg);
		}
		.menu li.s2:nth-child(4) > a{
			background:#aaa;
			transform:rotate(45deg);
		}
		.menu li.s2:nth-child(3) > a{
			background:#bbb;
			transform:rotate(30deg);
		}
		.menu li.s2:nth-child(2) > a{
			background:#ccc;
			transform:rotate(15deg);
		}
		.menu li.s1:hover ul.p2{
			transform:rotate(0deg);
		}
		.menu ul li:hover > a{
			background:#f00;
			color:#fff;
		}
		.menu li.s2:hover{
			transform:rotate(0deg);
		}
		.window{
			width:110px;height:110px;
			overflow:hidden;
			position:absolute;
			left:0;top:0;
			z-index:100;
			transition:0s 1s;
		}
		.menu:hover .window{
			width: 310px;
			height: 310px;
			transition: 0s 0s;
		}
		.menu ul li:hover > a{
			background:#f00; 
			color:#fff;}
		.menu li.s2:hover > a{
			background:#d00; 
			color:#fff;}
		.menu span {
			display:block;
			transform:rotate(5deg);
		}
	</style>