How to make a ribbon navigation? - html

Question

Right now I am stuck with this ribbon bookmark. I don't know how to make a navigation bar where ribbon is like in those two pictures:
Normal
On mouseover
How ribbon looks when page is active.
How ribbon looks when you slide cursor on selected menu. it should slide out.
nav[role="top"] {
width:60%;
float:right;
}
nav[role="top"] li {
float:right;
}
nav[role="top"] ul {
list-style-type: none;
margin: 10px;
padding: 0;
overflow: hidden;
}
nav[role="top"] li a {
color: #b3b3b2;
text-align: center;
padding: 14px 20px;
text-decoration: none;
width:50px;
font-size:11px;
font-family: 'Pontano Sans', sans-serif;
font-weight:600;
}
nav[role="top"] li:hover {
width: 0;
height: 30px;
border-right: 35px solid #103252;
border-left: 35px solid #103252;
border-bottom: 12px solid transparent;
}
<nav role="top">
<ul>
<div class="ribbon">
<li>home</li>
<li>news </li>
<li>blog</li>
<li>photos</li>
</div>
</ul>
</nav>

Answer 1

Here is my solution for this:
nav[role="top"] ul {
list-style-type: none;
float: right;
}
nav[role="top"] li {
display: inline-block;
position: relative;
float: right;
}
nav[role="top"] a {
display: block;
color: #b3b3b2;
text-align: center;
padding: 14px 0;
text-decoration: none;
width: 70px;
font-size: 11px;
font-family: 'Pontano Sans', sans-serif;
font-weight: 600;
background-color: #103252;
}
nav[role="top"] a::after {
content: '';
display: block;
position: absolute;
width: 0;
height: 20px;
border-right: 35px solid #103252;
border-left: 35px solid #103252;
border-bottom: 12px solid transparent;
}
nav[role="top"] a:hover::after {
height: 30px;
}
<nav role="top">
<ul>
<div class="ribbon">
<li>home</li>
<li>news </li>
<li>blog</li>
<li>photos</li>
</div>
</ul>
</nav>
Please be aware that element div is not allowed as child of element ul. It's not valid.