Search code examples
csshoverslidepersistentstates

Slideout CSS menu needs persistent hover state

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>
Solution

  • 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/