我们理念中的菜单都是矩形的，不是横向排列就是纵向排列，这里我们打破了常规的思维，把菜单做成圆形的。
在这里我们不得不克服几个问题：
如何定义html如何悬停定位菜单元素
在此之前先看一下最终效果是怎样的，DEMO放在前面主要是增加大家阅读的兴趣。
下面就让我们开始今天的教程吧
第一步：构建HTML
在编写HTML之前，必须先了解将要构建的结构是怎么样的，下图表示要构建的结构：
每个顶部的矩形框都与下面大圆中的一个小圆相联系，当把鼠标悬停在矩形框上时，对应的小圆旋转到菜单的顶部。而实现这个功能的难点就是怎样实现悬停在一个元素上从而影响另一个元素的表现状态。
为解决这个问题，让我们看看下面的HTML：
我们希望通过鼠标悬停在anchor上来改变target段落的颜色，如果你对hover的远程操作有一个基本的概念，你可能会先写出下面的css代码：
以上就实现了鼠标悬停在a上面，并且使紧临它的同级元素改变颜色。
具体应用：
运用上面的知识到本教程案例中，我们可以想出一个可行的结构，首先创建3个嵌套div，分别命名class为wrapper, menu和circle.
第二步：wrapper div的css
上面的HTML代码自此就书写完毕，下面主要的是css的问题，首先我们定义一些基本的样式：
这一步我们将定义一个大圆，用css制作圆是很简单的我们只需要把元素的宽度和高度设置成相等，然后把border的宽度设置成50%就行了。更多关于利用border来创建图形的教程可以参看我的《创建三角形的几种不同的方式》这篇文章。
为了让圆看起来更好看，更具有立体感，我们为其添加阴影效果transition，它将会在circle旋转时用到。
第四步：menu div的css
下面是对锚点（也就是这里的<a>元素），做一些样式设置和悬停效果：
第五步：小圆的css
首先我们这里是用ul li来制作小圆，所以要先清除它的固有样式用list-style:none;来清除，然后制作小圆，类似与制作大圆，宽高相等，border宽度50%，然后设置背景颜色和字体：
b