How to make a ribbon navigation?

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

1. How ribbon looks when page is active.
2. 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><a href="#">home</a></li>
  	  <li><a href="#">news </a></li>
	  <li><a href="#">blog</a></li>
	  <li><a href="#">photos</a></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><a href="#">home</a></li>
      <li><a href="#">news </a></li>
      <li><a href="#">blog</a></li>
      <li><a href="#">photos</a></li>
    </div>
  </ul>
</nav>

Please be aware that element div is not allowed as child of element ul. It's not valid.