Responsive menu open last itmes on hover

by nicoleamurray

HTML

<ul class="mainmenu" role="menubar">
   <li><a href="#">Home</a></li>
   <li><a href="#">Features</a></li>
   <li><a href="#">Pages</a></li>
   <li class="mainmenu__icon">:</li>
   <li><a href="#">Events</a></li>
   <li><a href="#">Shortcodes</a></li>
   <li><a href="#">Demo</a></li>
</ul>

CSS

.mainmenu{
    float: right;
    text-align: right;
}
.mainmenu li{
    display:inline-block
}
.mainmenu li:nth-child(4):hover ~ li{
  display:block;
  opacity:1
}
  @media (min-width: 600px){
    .mainmenu li:nth-child(4){
      display:none
      }
  }
  
.mainmenu li:nth-child(n+5){
  display:none;
  opacity:0
}
@media (min-width: 600px){
  .mainmenu li:nth-child(n+5){
    display: initial;
    opacity:1
  }
 }