Slideout CSS 메뉴에 지속적인 호버 상태가 필요합니다.

Question

그래서 지금까지 내가 만들고자하는 헤더 메뉴가 있습니다.

http://jsfiddle.net/2LUSL/

내가 내가 내가 그들을 위로 마우스를 이동하면서 볼 수 머물 슬라이드 아웃 div의 필요하다는 사실에서 떨어져 원하는대로 완벽하게 작동합니다.

이해/지식 부족에 대한 저의 용서와 이것이 전에 답변 된 경우에도 용서해주십시오.

사전에 도움을 주셔서 감사합니다.

내가 잘못 될 가능성이있는 부분은 목록에 요소를 추가하지 않았지만 도움이되지 않는다고 생각합니다.

<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

: 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; 
} 

편집 : 잘 작동 margin:auto : 는 컨테이너를 중앙에 http://jsfiddle.net/2LUSL/2/