如何制作功能区导航？

Question

现在我被这个功能区书签困住了。我不知道如何制作一个导航栏，其中的功能区就像这两张图片一样：

正常

鼠标悬停

1. 当页面处于活动状态时，功能区的外观如何。
2. 在所选菜单上滑动光标时功能区的外观。它应该滑出来。
＆＃13;
＆＃13;
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;

}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 1

以下是我的解决方案：

Please enter the number of days between 3 and 10, inclusive: 4
Day 1 - High: 5
Day 1 - Low: 3
Day 2 - High: 4
Day 2 - Low: 2
Day 3 - High: 2
Day 3 - Low: 1
Day 4 - High: 5
Day 4 - Low: 9

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的子元素。它无效。