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

【问题标题】：Sidebar on hover drags out. (preferably CSS Only)悬停时的侧边栏会拖出。（最好只有 CSS）
【发布时间】：2016-04-23 15:00:28
【问题描述】：

我在业余时间一直在开发一个网站，但我似乎不知道如何制作像 FontShop 在他们网站上的导航：https://www.fontshop.com/ 当您将鼠标悬停在他们的标志，或者在我的例子中，一个空白矩形，一个侧边栏导航出现。最好我只想用 CSS3 创建它，但如果可以提出 jquery/js 建议，那么我也会使用这些。

谢谢！

【问题讨论】：

是请求某人给你代码供你使用还是什么？你尝试过、做过什么或面临什么障碍？我们能提供什么帮助？
@AndrewL 我不知道该尝试什么。我已经能够创建垂直侧导航，但不能让它出现或重新出现。我试图创建两个 div，一个用于使用悬停动作，另一个用于将导航拖到页面上。但保持两者联系。我不要求完整的代码，我正在寻找 CSS 中的解决方案。如果它是可能的。我很好奇如何在一个 div 中使用 :hover 状态来更改另一个 div 中的属性。

标签： jquery css navigation hover

【解决方案1】：

您可以将徽标（作为图像或 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="stackoverflow" />
  </div>
</body>

CSS：

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

#logo {
  float: left;
}

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

小提琴： https://jsfiddle.net/v71fgshe/

【讨论】：