悬停时的侧边栏会拖出。 （最好是CSS只）

Sidebar on hover drags out. (preferably CSS Only)

我一直在业余时间做一个网站，但我似乎无法弄清楚如何制作像 FontShop 在其网站上的那样的导航：https://www.fontshop.com/ 是这样的，那个当您将鼠标悬停在他们的徽标上时，或者在我的情况下，悬停在一个空白矩形上时，会出现一个侧边栏导航。我最好只使用 CSS3 创建它，但如果可以提出 jquery/js 建议，那么我也会使用这些建议。

谢谢！

您可以将徽标（如图像或 div）和导航 div 放在一个公共容器中，然后将 :hover 应用于该容器：

HTML:

<body>
  <div id="container">
    <div id="navigation">
      <ul>
        <li>nav1</li>
        <li>nav2</li>
        <li>nav3</li>
      </ul>
    </div>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Stack_Overflow_logo.svg/320px-Stack_Overflow_logo.svg.png" id="logo" alt="Whosebug" />
  </div>
</body>

CSS:

#navigation {
  width: 200px;
  height: 200px;
  background: yellow;
  display: none;
  float: left;
}

#logo {
  float: left;
}

#container:hover #navigation {
  display: block;
}

Fiddle: https://jsfiddle.net/v71fgshe/