Dynamic circle navigation menu - css

Question

Here are the requirements:
Hover effect when any of the ‘Navigation’ sections (Navigation 1,
Navigation 2, Navigation 3) is selected.
Click effect when any of the ‘Navigation’ sections (Navigation 1,
Navigation 2, Navigation 3) is selected. If Navigation 1 is clicked,
it will go to another page, same as Navigation 2 and Navigation 3.
I have searched high and low for an example, and all of the search results points to using css, but this requires manually figuring out the position of the items.
.text
{
cursor:pointer;
}
.circle {
position: relative;
border: 0px;
padding: 0;
margin: 1em auto;
width: 430px;
height: 430px;
border-radius: 50%;
list-style: none;
overflow: hidden;
}
li {
overflow: hidden;
position: absolute;
top: -20%;
right: -20%;
width: 70%;
height: 70%;
transform-origin: 0% 100%;
}
.text {
position: absolute;
left: -100%;
width: 200%;
height: 200%;
text-align: center;
transform: skewY(-60deg) rotate(15deg);
padding-top: 20px;
}
li:first-child {
transform: rotate(0deg) skewY(30deg);
border-left: 8px solid #fff;
border-right: 8px solid #fff;
}
li:nth-child(2) {
transform: rotate(120deg) skewY(30deg);
border-right: 8px solid #fff;
border-left: 8px solid #fff;
}
li:nth-child(3) {
transform: rotate(240deg) skewY(30deg);
border-right: 8px solid #fff;
border-left: 8px solid #fff;
}
li:first-child .text {
background: green;
}
li:nth-child(2) .text {
background: tomato;
}
li:nth-child(3) .text {
background: aqua;
}
li:nth-child(3) .text:hover {
background-color: #a5e2f3;
}
li:nth-child(2) .text:hover {
background-color: #86d8ef;
}
li:nth-child(1) .text:hover {
background-color: #66ceeb;
}
.cn-button {
position: absolute;
top: 40%;
left: 50%;
z-index: 11;
margin-top: -2.25em;
margin-left: -2.25em;
padding-top: 0;
width: 4.5em;
height: 4.5em;
border: 1px solid;
border-radius: 50%;
background: none;
background-color: yellow;
color: yellow;
text-align: center;
font-weight: 700;
font-size: 1.5em;
text-transform: uppercase;
cursor: pointer;
-webkit-backface-visibility: hidden;
}
.icon {
position: absolute;
/* exact values here depend on what you are placing inside the items (icon, image, text, etc.) */
top: 40%;
/* make sure it it rotated enough; angle of rotation = angle of the sector itself */
transform: rotate(224deg);
/* style further as needed */
color: #fff;
font-family: Indie Flower;
font-size: 25px;
}
<button class="cn-button" id="cn-button"></button>
<ul class="circle">
<li>
<a class="one" href="circle.html">
<div class="text" ><span class="icon">Navigation 1</span></div>
</a>
</li>
<li>
<a class="two" href="circle2.html">
<div class="text"><span class="icon">Navigation 2</span></div>
</a>
</li>
<li>
<a class="three" href="circle3.html">
<div class="text"><span class="icon">Navigation 3</span></div>
</a>
</li>
</ul>
i want exact like .
How can I create a menu like this where I can dynamically add items?