圆形导航效果 | 圆形导航

圆形导航，略有瑕疵
		<style>
			*{margin:0;padding:0}
			ul{list-style:none;position:relative;margin:50px;}
			ul li{width:200px;height:200px;border-radius:50%;position:absolute;border:5px solid #ccc;text-align:center;line-height:200px;font-size:50px}
			#li1{background:#0ff;}
			#li2{background:#FF0000;left:150px;}
			#li3{background:#f0f;left:300px;}
			#li4{background:#ff3;left:450px;}
			#li5{background:#0f0;left:600px;}
		</style>
	</head>
	<body>
			<ul>
				<li id="li1">唐三藏</li>
				<li id="li2">孙悟空</li>
				<li id="li3">猪八戒</li>
				<li id="li4">沙和尚</li>
				<li id="li5">白龙马</li>
			</ul>
	</body>
</html>
<script type="text/javascript">
	var list = document.getElementsByTagName("li");
	for(var i = 0; i < list.length; i++){
		list[i].onmouseover = function(){
			console.log(1)
			this.style.zIndex = 10;
		}
		list[i].onmouseout = function(){
			this.style.zIndex = 0;
		}
	}
</script>