<nav class="menu">
<ul>
<li><a href="#products">Products</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#careers">Careers</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
.menu {
background: #cd3e3d;
width: 3em;
height: 3em;
border-radius: 5em;
margin: 5em auto;
cursor: pointer;
border: 1em solid #fdaead;
}
.menu:after {
content: "";
position: absolute;
top: 1em;
left: 1em;
width: 1em;
height: 0.2em;
border-top: 0.6em double #fff;
border-bottom: 0.2em solid #fff;
}
.menu ul {
list-style: none;
padding: 0;
}
.menu li {
width: 5em;
height: 1.4em;
padding: 0.2em;
margin-top: 0.2em;
text-align: center;
border-radius: 0 0.5em 0.5em 0 ;
transition: all 1s;
background: #fdaead;
opacity: 0;
z-index: -1;
}
.menu:hover li { opacity: 1; }
.menu:hover ul::before {
position: absolute;
content: "";
width: 0;
height: 0;
display: block;
left: 50%;
top: -5.0em;
border : 6.5em solid rgba(0,0,0,0.01);
border-radius: 0 7.5em 7.5em 0;
border-left: 0;
z-index: -1;
cursor: default;
}
.menu a {
color: white;
text-decoration: none;
line-height: 1.5em;
}
.menu a {
color: white;
text-decoration: none;
}
.menu ul {
transform: rotate(180deg) translateY(-2em);
transition: 1s all;
}
.menu:hover ul {
transform: rotate(0deg) translateY(-1em);
}
.menu li:hover {
background: #cd3e3d;
z-index: 10;
}
.menu li:nth-of-type(1) {
transform: rotate(-90deg);
position: absolute;
left: -1.2em;
top: -4.2em;
}
.menu li:nth-of-type(2) {
transform: rotate(-45deg);
position: absolute;
left: 2em;
top: -3em;
}
.menu li:nth-of-type(3) {
position: absolute;
left: 3.4em;
top: 0.3em;
}
.menu li:nth-of-type(4) {
transform: rotate(45deg);
position: absolute;
left: 2em;
top: 3.7em;
}
.menu li:nth-of-type(5) {
transform: rotate(90deg);
position: absolute;
left: -1.2em;
top: 5em;
}
.hint { text-align: center; }