我们理念中的菜单都是矩形的，不是横向排列就是纵向排列，这里我们打破了常规的思维，把菜单做成圆形的。
在这里我们不得不克服几个问题：
如何定义html如何悬停定位菜单元素
在此之前先看一下最终效果是怎样的，DEMO放在前面主要是增加大家阅读的兴趣。
下面就让我们开始今天的教程吧
第一步：构建HTML
在编写HTML之前，必须先了解将要构建的结构是怎么样的，下图表示要构建的结构：
每个顶部的矩形框都与下面大圆中的一个小圆相联系，当把鼠标悬停在矩形框上时，对应的小圆旋转到菜单的顶部。而实现这个功能的难点就是怎样实现悬停在一个元素上从而影响另一个元素的表现状态。
为解决这个问题，让我们看看下面的HTML：
复制代码
<div class=”item-1″>
<a href=”#”>anchor</a>
</div>
<div class=”item-2″>
<p>target</p>
</div>
我们希望通过鼠标悬停在anchor上来改变target段落的颜色，如果你对hover的远程操作有一个基本的概念，你可能会先写出下面的css代码：
复制代码
a:hover p { color: blue;}
这段代码不能达到我们的预期效果，观察上面HTML代码，我们要改变颜色的元素和鼠标悬停的元素分别在不同的div中，这无形中增加了我们实现的难度，所以需要改变HTML结构如下，把两个元素分别放在同一个div下：
复制代码
<div class=”item-1″> <a href=”#”>anchor</a> <p>target</p></div>
把两个元素分别放在同一个div下，anchor和target作为同级元素可以进行以下操作
复制代码
a:hover + p { color: blue;}
以上就实现了鼠标悬停在a上面，并且使紧临它的同级元素改变颜色。
具体应用：
运用上面的知识到本教程案例中，我们可以想出一个可行的结构，首先创建3个嵌套div，分别命名class为wrapper, menu和circle.
复制代码
<div class=”wrapper”>
<div class=”menu”>
<div class=”circle”>
</div>
</div>
</div>
在menu div里面设置4个锚点，分别有不同的class，在circle div里面是一个包含4个数字的ul li元素
复制代码
<div class=”wrapper”>
<div class=”menu”>
<a href=”#” class=”one”>One</a>
