demo

// pug
div.menu
  ul
    each v in [1,2,3,4,5,6,7,8]
      li
        a( href='#' )= v
        
 // css
 @mixin circle-layout($radius, $dot-radius, $num) {
  $deg: 360deg / $num;
  ul{
    box-sizing: border-box;
    position: relative;
    width: $radius * 2;
    height: $radius * 2;
    border: 1px solid #ccc;
    border-radius: 50%;
  }
  li {
    box-sizing: border-box;
    position: absolute;
    width: $dot-radius * 2;
    height: $dot-radius * 2;
    border-radius: 50%;
    border: 1px solid gray;
    list-style: none;
    line-height: $dot-radius * 2;
    top: 0;
    left: 50%;
    margin: #{ -$dot-radius } 0 0 #{ -$dot-radius };
    transform-origin: $dot-radius #{ $radius + $dot-radius };
    & > a {
      display: block;
      width: 100%;
      height:100%;
      text-align: center;
    }
  }
  @for $i from 1 through $num {
    li:nth-child(#{$i}) {
      transform: rotate($deg * $i);
      a {
        transform: rotate(-$deg * $i);
      }
    }
  }
}

body {
  display: flex;
  justify-content: center;
}

@include circle-layout(100px, 20px, 8);