我們理念中的菜單都是矩形的，不是橫向排列就是縱向排列，這裡我們打破了正常的思維，把菜單做成圓形的。
在這裡我們不得不克服幾個問題：
如何定義html如何懸停定位菜單元素
在此之前先看一下最終效果是怎樣的，DEMO放在前面主要是增加大家閱讀的興趣。
下面就讓我們開始今天的教程吧
第一步：建構HTML
在編寫HTML之前，必須先了解将要建構的結構是怎麼樣的，下圖表示要建構的結構：
每個頂部的矩形框都與下面大圓中的一個小圓相聯系，當把滑鼠懸停在矩形框上時，對應的小圓旋轉到菜單的頂部。而實作這個功能的難點就是怎樣實作懸停在一個元素上進而影響另一個元素的表現狀态。
為解決這個問題，讓我們看看下面的HTML：
複制代碼代碼如下:
anchor
target
我們希望通過滑鼠懸停在anchor上來改變target段落的顔色，如果你對hover的遠端操作有一個基本的概念，你可能會先寫出下面的css代碼：
複制代碼代碼如下:
a:hover p { color: blue;}
這段代碼不能達到我們的預期效果，觀察上面HTML代碼，我們要改變顔色的元素和滑鼠懸停的元素分别在不同的div中，這無形中增加了我們實作的難度，是以需要改變HTML結構如下，把兩個元素分别放在同一個div下：
複制代碼代碼如下:
anchor
target
把兩個元素分别放在同一個div下，anchor和target作為同級元素可以進行以下操作
複制代碼代碼如下:
a:hover + p { color: blue;}
以上就實作了滑鼠懸停在a上面，并且使緊臨它的同級元素改變顔色。
具體應用：
運用上面的知識到本教程案例中，我們可以想出一個可行的結構，首先建立3個嵌套div，分别命名class為wrapper, menu和circle.
複制代碼代碼如下:
在menu div裡面設定4個錨點，分别有不同的class，在circle div裡面是一個包含4個數字的ul li元素
複制代碼代碼如下:
One
Two
Three
Four
- 1
- 2
- 3
- 4
讓我們用一張圖檔來更清晰的了解上面所描述的結構
第二步：wrapper div的css
上面的HTML代碼自此就書寫完畢，下面主要的是css的問題，首先我們定義一些基本的樣式：
複制代碼代碼如下:
* {
margin: 0;
padding: 0;
-webkit-backface-visibility: hidden;
}
.wrapper {
position: relative;
margin: 20px auto;
width: 3670px;
}
第三步：circle div的css
這一步我們将定義一個大圓，用css制作圓是很簡單的我們隻需要把元素的寬度和高度設定成相等，然後把border的寬度設定成50%就行了。更多關于利用border來建立圖形的教程可以參看我的《建立三角形的幾種不同的方式》這篇文章。
複制代碼代碼如下:
.circle {
position: relative;
margin-top: 30px;
margin-bottom: 20px;
margin-left: 25px;
width: 300px;
height: 300px;
border-radius: 50%;
background: #093b62;
}
為了讓圓看起來更好看，更具有立體感，我們為其添加陰影效果transition，它将會在circle旋轉時用到。
複制代碼代碼如下:
.circle {
position: relative;
margin-top: 30px;
margin-bottom: 20px;
margin-left: 25px;
width: 300px;
height: 300px;
border-radius: 50%;
background: #093b62;
box-shadow: inset 0px 0px 30px rgba(0,0,0,0.3);
-webkit-box-shadow: inset 0px 0px 30px rgba(0,0,0,0.3);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
如果我們看一看實時預覽，我們應該有一個漂亮的大圓和一些其他各種分散的元素，接下來将會對這些分散的元素進行處理。
第四步：menu div的css
下面是對錨點(也就是這裡的元素)，做一些樣式設定和懸停效果：
複制代碼代碼如下:
.menu a {
margin-right: -4px;
padding: 10px 30px;
width: 50px;
color: #333;
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%，然後設定背景顔色和字型：
複制代碼代碼如下:
.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”來完成，并對齊進行絕對定位，它不會随大圓的旋轉而旋轉。
複制代碼代碼如下:
.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);
box-shadow: 3px 3px 10px rgba(0,0,0,0.3);
}
自此css樣式全部定義完成，剩下的就是文章開頭講到的遠端控制元素行為：
第七步：圓的”:hover”僞元素設定
要使菜單旋轉，必須結合文章開頭的遠端控制教程，當滑鼠懸停在錨點上時，下面的圓旋轉到對應的頂部位置。HTML中錨點和circle div是同級元素，這裡我們需要搞定的是選擇器的問題，也是本文最難的部分。是以選擇器部分，第一個不用旋轉，是以我們從第二個開始如下：
複制代碼代碼如下:
.menu > .two:hover ~ .circle {}
2所處的位置需要逆時針旋轉90°才能到達預期位置是以：
複制代碼代碼如下:
menu > .two:hover ~ .circle {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
類似的我們有.one 0° .two -90°, .three -180° ,.four -270°.
複制代碼代碼如下:
.menu > .one:hover ~ .circle {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
.menu > .two:hover ~ .circle {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.menu > .three:hover ~ .circle {
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
}
.menu > .four:hover ~ .circle {
-webkit-transform: rotate(-270deg);
-moz-transform: rotate(-270deg);
-ms-transform: rotate(-270deg);
-o-transform: rotate(-270deg);
transform: rotate(-270deg);
}
最終效果：