0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>The intermediate result doesn’t look very much like a round menu, but we just need to add a few more lines of CSS code, and everything will be transformed.</p>
1
<p>The intermediate result doesn’t look very much like a round menu, but we just need to add a few more lines of CSS code, and everything will be transformed.</p>
2
<p>First of all, we will cut off the parts of links that protrude outside the menu items and get rid of redundant intersections. To do this, assign the hidden value to the overflow property for the list items.</p>
2
<p>First of all, we will cut off the parts of links that protrude outside the menu items and get rid of redundant intersections. To do this, assign the hidden value to the overflow property for the list items.</p>
3
<p>Then we need to assign the menu a round shape.</p>
3
<p>Then we need to assign the menu a round shape.</p>
4
<p>To do this, we will work with the ul list itself, which now looks like a square with a blue border. Add the border-radius property with the value 50% to it, and the square will be transformed into a circle.</p>
4
<p>To do this, we will work with the ul list itself, which now looks like a square with a blue border. Add the border-radius property with the value 50% to it, and the square will be transformed into a circle.</p>
5
<p>And then all that remains is to cut off everything lying outside the circle. And use overflow again.</p>
5
<p>And then all that remains is to cut off everything lying outside the circle. And use overflow again.</p>
6
<p>The round menu consisting of two menu items is ready. You can remove the auxiliary backgrounds and frames.</p>
6
<p>The round menu consisting of two menu items is ready. You can remove the auxiliary backgrounds and frames.</p>