CSS3圆形动画

Question

I did a CSS3 circular animated menu with the menu items starting from the left end and rotates to the right to their corresponding locations.
I have put each of the menu items inside a container and made each container to rotate to different angles to bring out the animation.
What my problem is since each menu item is inside a container, there would be as many as containers as there are menu items which makes it impossible to get the :hover action for the anchor tag inside each menu item since the container is in the top. Can someone suggest a fix for this?

You can see it here:

http://jsfiddle.net/blueeyes/bWWHm/4/

You can see that I am able hover the links aa and fff because aa doesn't have a container and the container of fff is on top of all.
The other links are under the container so not accessible.

Answer 1

You're overcomplicating things, you don't need a container. You just position all menu items absolutely at the center of the circle, then you rotate each one by the desired angle, translate it outwards by the radius of the circle and then rotate it again by the opposite angle to make the text horizontal again. In this way, the center of each menu item is going to be on the circle.

DEMO

HTML :

<ul class='circ-menu'>
  <li><a href='#'>aa</a></li>
  <li><a href='#'>bb</a></li>
  <!-- and so on -->
</ul>

CSS :

.circ-menu {
  position: relative;
  padding: 0;
  width: 10em; height: 10em;
  list-style: none;
}
.circ-menu li {
  position: absolute;
  top: 50%; left: 50%;
  margin: -1.5em;
  width: 3em; height: 3em;
  background: rgba(255, 0, 0, .3);
}
.circ-menu li:first-child {
  transform: rotate(-112.5deg) translateY(-5em) rotate(112.5deg);
}
.circ-menu li:nth-child(2) {
  transform: rotate(-67.5deg) translateY(-5em) rotate(67.5deg);
}
/* and so on */