<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
 */