如何制作功能区导航？

Question

现在我被这个丝带书签困住了。我不知道如何制作像那两张图片中的功能区那样的导航栏:

正常

鼠标悬停时

页面处于活动状态时功能区的外观。
在选定菜单上滑动光标时功能区的外观。它应该滑出。

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

这是我的解决方案：

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>

请注意，元素 div 不允许作为元素 ul 的子元素。无效。

如何制作功能区导航？

How to make a ribbon navigation?

html

css

ribbon