带有CSS的侧边栏

Question

我正在尝试制作CSS侧边栏。默认情况下应该隐藏它，只是右边的图像出现（见下文）。一旦用户将鼠标悬停在此图像上，它就会显示出来并显示一个带有一些文字的小盒子。

侧边栏不应位于右上角，而应位于屏幕高度的一半。我已经可以在左侧和没有动画的情况下执行此操作（请参阅代码）。对我来说看起来不可能：我讨厌CSS（!!!），我希望有人能帮助我做到这一点。非常感谢您的耐心，请原谅我的问题，但我是CSS的大菜鸟。

编辑：http://jsfiddle.net/WSZbe/1/这是我迄今为止的尝试......

#side{
position:absolute;
  top:0;
  left:0;
  height:40px;
allign: center;
background-color: blue; 

Answer 1

#side{
position:absolute;
  top:0;
  left:0;
  height:40px;
allign: center;
background-color: blue; 
}
#side:hover{
  position:absolute;
  top:0;
  left:200px;
  height:40px;
  allign: center;
  background-color: blue; 
}

Answer 2

这样的东西？我现在没时间调整它，但你应该知道这是不是你想要的...... FIDDLE Link