CSS中的汉堡菜单按钮行为

Question

我正在尝试为我的网站编写 humburger 菜单按钮行为。 我想要的是在导航栏中显示标题和菜单按钮。当用户点击按钮时，我希望隐藏标题并显示两个菜单项。

这听起来并不复杂，但我做不到。

简化html是

<div id="container">
<div id="button">B</div>
<div id="menu1">Menu 1</div>
<div id="title">Title</div>
<div id="menu2">Menu 2</div>

<div style="clear: both;"> </div>
</div>

和css是

div {border:1px solid black;}

#menu1, #title, #menu2 {float:left;}
#button {float:right;}

#menu1, #menu2 {
  width:40%;
  display:none;
  }

#title {
  width:80%;
  display:block;
  }


#button:hover + #menu1, 
#button:hover + #menu2 {
  display:block;
  }

#button:hover + #title {
  display:none;
  }

以下是此代码的jsfiffle。 我哪里出错？