text-decoration: none;
font: 15px/25px Helvetica, Arial, sans-serif;
}
.menu a:hover {
background: #eee;
}
在启用预览看一些，将会比上面好看的多，并且悬停会出现设置的效果，但是ul li还是是很乱的表现,接下来将解决这个问题：
第五步：小圆的css
首先我们这里是用ul li来制作小圆，所以要先清除它的固有样式用list-style:none;来清除，然后制作小圆，类似与制作大圆，宽高相等，border宽度50%，然后设置背景颜色和字体：
复制代码
/*LITTLE CIRCLES*/
.circle li {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
background: white;
list-style: none;
text-align: center;
font: 20px/50px Helvetica, Arial, sans-serif;
}
下面是最困难的部分，为小圆定位，这里用绝对定位方式，首先我们用nth-child找到子元素，然后分别用top、left属性来定位，并使用CSS的transform属性来旋转小圆，以便于大圆旋转时对应的小圆中的数字处于正向。
复制代码
.circle li:nth-child(1) {
top: 15px;
left: 125px;
}
.circle li:nth-child(2) {
top: 125px;
left: 235px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.circle li:nth-child(3) {
top: 235px;
left: 125px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.circle li:nth-child(4) {
top: 125px;
left: 15px;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
下面在看一下预览，是不是看起来要好很多了：
第六步：内部圆的css
在DEMO中我们还看见中间有一个白色的带“DS”文字的圆，这里使用伪元素“:before”来完成，并对齐进行绝对定位，它不会随大圆的旋转而旋转。
复制代码
/*INNER CIRCLE*/
.wrapper:before {
content: “DS”;
text-align: center;
font: 70px/135px Georgia, Times, serif;
color: #efefef;
position: absolute;
top: 140px;
left: 110px;
z-index: 10;
width: 130px;
height: 130px;
border-radius: 50%;
background: #fff;
-webkit-box-shadow: 3px 3px 10px rgba(0,0,0,0.3);
