Slideout CSS menu needs persistent hover state - css

Question

So this is where I am so far with a header menu I am trying to create.
http://jsfiddle.net/2LUSL/
It works perfectly as I want it apart from the fact that I need the divs that slideout to stay visible while I hover over them.
Forgive my lack of understanding/knowledge and also if this has been answered before.
Thanks for any help in advance.
I think where I might be going wrong is that I haven't made my elements into a list, but when I do it doesn't help.
<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>

Answer 1

you should catch hover state on main container : http://jsfiddle.net/2LUSL/1
#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;
}
Edit:
to center your container: margin:auto works fine : http://jsfiddle.net/2LUSL/2/