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

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 >ToggleIcon</DIV>
     <ul  style="display:none;">
         <li>ITEM1
         <li>ITEM1
         <li>ITEM1
     </ul>
  </navbar>
</header>

CodePudding user response：

.toggleicon:hover ~ .items {
  display: block !important;
}

<header>
  <navbar>
   <DIV >ToggleIcon</DIV>
     <ul  style="display:none;">
         <li>ITEM1</li>
         <li>ITEM2</li>
         <li>ITEM3</li>
     </ul>
  </navbar>
</header>

You shouldn't be using the inline style, that's why you need !important in this case. But if you add a custom style for .items of display: none and remove the inline one, you won't need the !important.

CodePudding user response：

.items{
  display: none;
}
.toggleicon:hover ~ .items{
  display:block;
}

<header>
  <navbar>
   <div >ToggleIcon</div>
     <ul >
       <li>ITEM1</li>
       <li>ITEM1</li>
       <li>ITEM1</li>
     </ul>
  </navbar>
</header>

CodePudding user response：

.toggleicon:hover ~ ul {
    display: block !important;
}

use display: none for class .items

CodePudding user response：

.toggleicon:hover .items {
  display:block;
}