How to place items to activate Hover effect under navbar by using CSS only

All I want to obtain is; Hover on Toggleicon and nav items will display. Can you help me how to achieve this

<header>
  <navbar>
   <DIV class="toggleicon">ToggleIcon</DIV>
     <ul class="items" style="display:none;">
         <li>ITEM1
         <li>ITEM1
         <li>ITEM1
     </ul>
  </navbar>
</header>

>Solution :

.items{
  display: none;
}
.toggleicon:hover ~ .items{
  display:block;
}
<header>
  <navbar>
   <div class="toggleicon">ToggleIcon</div>
     <ul class="items">
       <li>ITEM1</li>
       <li>ITEM1</li>
       <li>ITEM1</li>
     </ul>
  </navbar>
</header>

Leave a Reply