how to show/hide or display/hide content-list in css

This is a simple code to show and hide content. when the button is hovered the list is shown but when I want to go through my list (for example a or b or c ) it (the list) will be disappeared.something that i need to have is remaining content or my list when i go through it. is there any way to solve it?

.hide {
  display: none;
}

.myDiv:hover+.hide {
  display: block;
  color: red;
}

<ul>
  <button class="myDiv">hover</button>
  <div class="hide">
    <li>a</li>
    <li>b</li>
    <li>c</li>
  </div>
</ul>

I tried it by css code

I have re-organize the html structure and updated css for better understanding. Keep in mind that I have given display:inline-block to myDiv class restrict 100% width.

.myDiv{
display: inline-block;
}

.hide {
  display: none;
  margin: 0;
}

.myDiv:hover .hide {
  display: block;
  color: red;
}

<div class="myDiv">
  <button class="button">hover</button>
  <ul class="hide">
    <li>a</li>
    <li>b</li>
    <li>c</li>
  </ul>
</div>