滑动CSS菜单需要持续的悬停状态

到目前为止，我正在尝试创建一个标题菜单

它完美地工作，因为我想它除了事实上，我需要的是，滑出保持可见，而我悬停在他们

请原谅我缺乏理解/知识，如果之前已经回答过这一问题

提前谢谢你的帮助

我想我可能会出错的地方是我没有把我的元素列成一个列表，但是当我这样做的时候，它没有帮助

<div id="slidecontainer">

    <div id="slideout" class="zero"></div>
    <div id="slideout" class="one"></div>
    <div id="slideout" class="two"></div>
    <div id="slideout" class="three"></div>
    <div id="slideout" class="four"></div>

</div>

---

您应该捕获主容器上的悬停状态：

编辑：

---

要使容器居中：

margin:auto

工作正常：

我的标记是正确的，但是CSS中缺少了一些东西，它们在从单个绿色圆圈滑出的绿色圆圈上保持持久悬停状态。糟糕的描述你可以更好地理解我在JSFIDLE中的意思：我希望滑出的圆圈在悬停在它们上面时保持在原位，就像css下拉菜单一样。谢谢你的回复。虽然这不是我想要的，但对于我想要实现它的方式来说，这实际上很可能是更好的设计。非常感谢你的帮助。我是新来这里的，而且达到了CSS的这个水平，所以我真的很感谢你的帮助。

#slidecontainer {
    position: relative;
    top: 0px;
    left: 50%;
    margin-top: 0px;
    margin-left: -152px;
    height:150px;
    width:300px;
    border: 2px solid #333;
    border-radius: 0 0 300px 300px;
    -moz-border-radius: 0 0 300px 300px;
    -webkit-border-radius: 0 0 300px 300px;
    background:red;
}
#slideout {
    position: absolute;
    top: 95px;
    left: 124px;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
    height:50px;
    width:50px;
    border: 1px solid #000;
    border-radius: 100px 100px 100px 100px;
    -moz-border-radius: 100px 100px 100px 100px;
    -webkit-border-radius: 100px 100px 100px 100px;
    background:green;
    line-height:50px;
    text-align:center;
}
#slideout.zero {
    z-index:1;
}
#slidecontainer:hover #slideout.one {
    left: 25px;
    top: 45px;
}
#slidecontainer:hover #slideout.two {
    left: 70px;
    top: 80px;
}
#slidecontainer:hover #slideout.three {
    left: 222px;
    top: 45px;
}
#slidecontainer:hover #slideout.four {
    left: 178px;
    top: 80px;
}