<div class="icon">MENU
  <ul class="menu">
    
    <li class="spread">
          <a class="unit" href="#">2</a>
    </li>
    
    <li class="spread">
          <a class="unit" href="#">4</a>
    </li>
    
    <li class="spread">
          <a class="unit" href="#">6</a>
    </li>
    
    <li class="spread">
          <a class="unit" href="#">7</a>
    </li>
    
    <li class="spread">
          <a class="unit" href="#">8</a>
    </li>
    
    <li class="spread">
          <a class="unit" href="#">9</a>
    </li>
    
    <li class="spread">
          <a class="unit" href="#">10</a>
    </li>
    
    <li class="spread">
          <a class="unit" href="#">11</a>
    </li>
    
    <li class="spread">
          <a class="unit" href="#">14</a>
    </li>
    
  </ul>
</div>

@import "compass/css3";

           $li: 9; /* [1] */
    $icon-size: 150px; /* [2] */
    $menu-size: 300px / 2; /* [3] */
    $unit-size: 45px;  /* [4] */
$menu-position: (($menu-size * 2) - $icon-size) / -2;
       $offset: 100px; /* [5] */
          $deg: 360deg / $li; /* [6] */

/* Styles: */
.icon {
  position: relative;
	background: white;
	cursor: pointer;
	margin: auto;
	color: deepskyblue;
	border-radius: 50%;
  height: $icon-size;
	width: $icon-size;
	line-height: $icon-size;
  text-align: center;
 	font-size: 2.75em;
 	font-weight: bold;
 	transition: 0.24s 0.2s;
}

.icon:hover {
	background: rgba(white,0.75);
}

.menu {
  position: absolute;
  top: $menu-position;
  left: $menu-position;
  border: $menu-size solid transparent;
  cursor: default;
  border-radius: 50%;
  transform: scale(0);
	transition: transform 1.4s 0.07s;
	z-index: -5;
}

.spread {
	position: absolute;
	top: -($offset);
	left: -($offset);
	transform-origin: $offset $offset;
	transition: all 0.5s 0.1s;
}

.icon:hover {
	 .menu {
		 transition: transform 0.4s 0.08s,
				  				        z-index   0s  0.5s;
  	 transform: scale(1);
  	 z-index: 5;
	 }
	 .spread, .unit {
	 	 transition: all 0.6s;
	 }
  
/* Where all the MAGIC happens: */
	 @for $m from 1 through $li {
	   .spread:nth-child(#{$m}) {
		    transition-delay: $m * 0.02s;
		    transform: rotate(45 + $deg * $m);
		    .unit {
			     transition-delay: $m * 0.04s;
			     transform: rotate(-$deg * $m + 720 - 45);
		    }
	   }
  }
} /* END .icon:hover */

.unit {
 	position: absolute;
 	background: white;
 	font-size: 60%;
  text-decoration: none;
 	width: $unit-size;
 	height: $unit-size;
 	line-height: $unit-size;
 	color: dodgerblue;
 	border-radius: 50%;
 	transition: 0.6s;
}




/* Just CodePen layout stuff: */ body,a,ul,li{margin:0;outline:0;padding:0;list-style:none}html,body{height:100%;min-height:$menu-size*2}body{font-family:sans-serif;background:radial-gradient(deepskyblue,dodgerblue);transform:translate3d(0,0,0)}.icon{top:50%;margin-top:$icon-size/-2}

/*     NOTES:
 * [1] Number of list-items you want
 * [2] Size of closed menu "icon"
 * [3] Size of your expanded menu
 * [4] Size of the small units
 * [5] Used to transform the origin of the rotation on the list-itmes to the middle of the menu so they spin out in a centered circle. The same number also offsets position of the list items so they don't sit right on the edge of the actual <ul>, that way there's padding and the menu won't close down if the user moves their cursor a bit too far.
 * [6] Used for the degrees of rotation between each list item, keeping them all evenly spaced. 360 degrees in a circle divided by the number of list items you have
 */