仅限 CSS - 如何在按钮悬停时滑出菜单？

Question

当我将鼠标悬停在按钮上时，我希望菜单滑出。不知何故，只有当我将悬停效果添加到菜单本身而不是按钮时，它才会起作用。我在网上能找到的都是一样的(悬停效果附加到应该滑出的菜单，而不是按钮)。我该如何实现？jsfiddle:https://jsfiddle.net/codingcodingcoding/tuhug8x8/

html:

  <span class="glyphicon glyphicon-home icon" style="font-size:40px;z-index:2;"> </span>
  <nav id="navigation">
    <ul>
      <li>home</li>
      <li>home</li>
      <li>home</li>
    </ul>
  </nav>

CSS:

.icon:hover#navigation {
  left: 0;
}

.icon {
  left: 0px;
}

#navigation {
  position: fixed;
  width: 200px;
  height: 300px;
  background-color: red;
  top: 0;
  left: -200px;
}

Answer 1

html

<span class="glyphicon glyphicon-home icon" style="font-size:40px;z-index:2;"> </span>
  <nav id="navigation">
    <ul>
      <li>home</li>
      <li>home</li>
      <li>home</li>
    </ul>
  </nav>

CSS:

.icon:hover + #navigation {
  left: 0;
}

.icon {
  left: 0px;
}

#navigation {
  position: fixed;
  width: 200px;
  height: 300px;
  background-color: red;
  top: 0;
  left: -200px;
}

在这里，我只添加了 + 选择器 olny。