A CodePen by Long Lazuli. a CSS Circular Menu.

index.haml

%menu.circular{:'data-title' => 'Go!'}
  %label{:for => 'Home'}
    %a{:href => '#Home'} Home
  %label{:for => 'Doc'}
    %a{:href => '#Doc'} Doc
  %label{:for => 'Demo'}
    %a{:href => '#Demo'} Demooooooo
  %label{:for => 'Doc'}
    %a{:href => '#Doc'} Doc
  %label{:for => 'Demo'}
    %a{:href => '#Demo'} Demo
  %label{:for => 'Demo'}
    %a{:href => '#Demo'} Demo
  %label{:for => 'Demo'}
    %a{:href => '#Demo'} Demo

style.scss

@import "compass";
// Maximum number of Item in menu :
  $max-items: 12;



body {
  background-image: url( http://fc09.deviantart.net/fs27/f/2008/070/d/a/Wood_tile_wallpaper_by_neko_xexe.png );
  background-size: cover;
}

menu.circular {
  font-weight: bold;
  color: rgba(0,0,0,0.5);
  text-shadow: -0.125em -0.1em .5em rgba(0,0,0,0.5),
    0.1em 0.06em 0 rgba(255,255,255,0.5);
  text-decoration: none;

  &, *, *:before, *:after {
    box-sizing: border-box;
  }
  *, *:before, *:after {
    font-weight: inherit; color: inherit; font-family: inherit; text-shadow: inherit; text-decoration: inherit;
  }
  font-family: sans-serif;
  * { font-family: inherit }
  
  &[data-title]:before { content: attr( data-title );}
  &:before {
      content: "Menu";
      text-transform: uppercase;
    transition-property: border, color, text-shadow, box-shadow;
    transition-timing-function: linear;
    transition-duration: 200ms;
    transition-delay: 300ms, 300ms, 300ms, 0;
      
      width: 6.5em;
      height: 5.5em;
      line-height: 5.5em;
      position: absolute;
      top: 50%;
      left: 50%;
      display: inline-block;
      border: rgba(0,0,0,0.0) 0.5em solid;
      transform: translate( -50%, -50% );
      border-radius: 50%;
      box-shadow: /*
                  0.125em 0.1em .5em 0 rgba(0,0,0,0.5),
                  -0.1em -0.06em 0 0 rgba(255,255,255,0.5),
                  */
                  inset 0.125em 0.1em .5em 0 rgba(0,0,0,0.5),
                  inset -0.1em -0.06em 0 0 rgba(255,255,255,0.5);

  }
  &:hover:before {
    border-width: 6.5em;
    transition-duration: 100ms;
    transition-delay: 0;
      color: transparent;
      text-shadow: none;
      box-shadow: none;
  }
  background-color: rgba(0,0,0,0);
  width: 4em;
  text-align: center;
  height: 4em;
  line-height: 4em;
  display: inline-block;
  border-radius: 50%;
  position: fixed;
  box-shadow: 0.125em 0.1em .5em 0 rgba(0,0,0,0.5),
    -0.1em -0.06em 0 0 rgba(255,255,255,0.5);
    transition-property: box-shadow;
    transition-duration: 200ms;
  &:hover {     box-shadow: none;}
  
  left: 8em;
  top: 7em;
  //transform: translate(-50%, 0);
  > * {
    opacity: 0.0;
  }
  &:hover > * {
    opacity: 1;
    transition-delay: 0, 0, 100ms, 200ms;

  }
    
  > * {
    display: inline-block;
    transition-property: margin, left, opacity, transform;
    transition-duration: 200ms, 200ms, 200ms, 200ms;
    transition-timing-function: linear;
    transition-delay: 200ms, 200ms, 100ms, 0;
      
    left: -50%;
    &:first-child {
      left: 100%;
    }
    top: 50%;
    position: absolute;
    transform: translate( -100%, -50% );
    transform-origin: -50% 0;
    width: 100%;
    height: 100%;
    line-height: 100%;

    margin: 0;
    padding: 0.5em;

    > * {
      color: transparent;
        text-shadow: none;
      display: inline-block;
      border: 0.5em transparent solid;
      transition-property: transform, color, text-shadow;
      transition-duration: 200ms;
      transition-delay: 0,0,0;
      transition-timing-function: linear;
      border-radius: 50%;
        width: 200%;
        height: 200%;
        line-height: 4em;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        transform: translate( -1.5em, -1.5em);
        box-shadow: /*-0.125em -0.1em .5em 0 rgba(0,0,0,0.5),
                   0.1em 0.06em 0 0 rgba(255,255,255,0.5),*/
                    inset -0.125em -0.1em .5em 0 rgba(0,0,0,0.5),
                    inset 0.1em 0.06em 0 0 rgba(255,255,255,0.5);
        &:hover {
          transition-delay: 0,500ms,0;

          box-shadow: -0.125em -0.1em .5em 0 rgba(0,0,0,0.5),
                   0.1em 0.06em 0 0 rgba(255,255,255,0.5);
          &:active {
            box-shadow: -0.125em -0.1em .5em 0 rgba(0,0,0,0.5),
                   0.1em 0.06em 0 0 rgba(255,255,255,0.5),
                    inset -0.125em -0.1em .5em 0 rgba(0,0,0,0.5),
                    inset 0.1em 0.06em 0 0 rgba(255,255,255,0.5);
            
            }
          
          }
     padding: 0.5em;
     margin: 0;
        
      }

  }
    
    &:hover > * > *{
      color: inherit;
      text-shadow: inherit;
    }
}

menu.circular > *:not(:first-child) {
  transform: translate( 50%, -50% );
}
menu.circular:hover {

  > *:first-child {
    margin-left: 125%;
    > * { transform: none; }
  }
  > *:not(:first-child) {
    left: 100%;
  }

  @for $numberOfItem from 2 through $max-items {
    $circlePart: 360 / $numberOfItem;
    @for $itemIndex from 2 through $numberOfItem {
      $rotationValue: $circlePart * ( $itemIndex - 1);
      > *:first-child:nth-last-child(#{$numberOfItem}) ~ *:nth-child(#{$itemIndex}) {
        transform: rotate(#{$rotationValue}deg) translate( 25%, -50% );
        
        @if $numberOfItem < 8 {
        > * { transform: rotate(-#{$rotationValue}deg) }
        }
      }
    }
  }
}