圆形导航，略有瑕疵
<style>
*{margin:0;padding:0}
ul{list-style:none;position:relative;margin:50px;}
ul li{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>