* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f7f7f7;
}

.menu_content {
    width: 100px;
    height: 450px;
}

.item {
    border-radius: 50%;
    color: white;
    padding: 10px;
    position: absolute;
    cursor: pointer;
    transition: all .5s ease-in-out;
}

i {
    font-size: 50px;
}

.active {
    transform: rotate(45deg);
}

.active ~ .options .item:hover {
    scale: 1.1;
    transition: scale .3s;
}

.active ~ .options .item:nth-child(1) {
    transform: translate(-4.5rem, -2.5rem);
}

.active ~ .options .item:nth-child(2) {
    transform: translate(0, -5.5rem);
    transition-delay: .1s;
}

.active ~ .options .item:nth-child(3) {
    transform: translate(4.5rem, -2.5rem);
    transition-delay: .2s;
}
.active ~ .options .item:nth-child(4) {
    transform: translate(-4.0rem, 3rem);
    transition-delay: .2s;
}
.active ~ .options .item:nth-child(5) {
    transform: translate(0, 5.6rem);
    transition-delay: .2s;
}
.active ~ .options .item:nth-child(6) {
    transform: translate(4.5rem, 3rem);
    transition-delay: .2s;
}