CSS3 Menu unfolds, dissapears on hover - html

Question

I have made a Menu with transitions in CSS3, but the problem is that the buttons that unfold dissapear when i try to hover over them, because of the transition that is just set on the Mainmenu DIV.
I could use some help!
Here is my jsfiddle: http://jsfiddle.net/7zn2D/
Here is my code:
<div id="mainmenu">
<div id="menu">MENU</div>
<div id="home">HOME</div>
<div id="video">VIDEO</div>
<div id="photos">>PHOTO'S</div>
<div id="calendar">CALENDAR</div>
</div>
#mainmenu {
position: fixed;
width: 100px;
height: 100px;
top: 400px;
right: -50px;
heigth: auto;
width: auto;
}
#mainmenu div {
color: #333333;
text-decoration: none;
font-size: 22px;
font-weight: 500;
position: fixed;
width: 100px;
height: 100px;
top: 400px;
right: -50px;
background: #333333;
text-align: center;
line-height: 100px;
transition: all 1s ease;
transform: rotate(45deg);
}
a {
display: block;
text-decoration: none;
}
#main_nav { list-style: none; margin: 0; padding: 0; }
#main_nav li a { /*text-indent: -999999px;*/ overflow: hidden; display: block; float: right;}
#menu {
z-index: 5;
}
#home {
z-index: 4;
}
#video {
z-index: 3;
}
#photos {
z-index: 2;
}
#calendar {
z-index: 2;
}
#menu:hover {
background: #FFFFFF;
}
#menu:hover ~ #home {
transition: all 0.3s ease;
transform: rotate(45deg) translate(0px,105px) perspective(350px);
}
#menu:hover ~ #photos {
transition: all 0.3s ease;
transition-delay: 0.3s;
transform: rotate(45deg) translate(0px,210px) perspective(350px);
}
#menu:hover ~ #video {
transition: all 0.3s ease;
transform: rotate(45deg) translate(-105px,0px) perspective(350px);
}
#menu:hover ~ #calendar {
transition: all 0.3s ease;
transition-delay: 0.3s;
transform: rotate(45deg) translate(-210px,0px) perspective(350px);
}

Answer 1

You need to apply the :hover event to the parent, #mainmenu. In order to do that, I made #mainmenu have position:fixed and absolutely positioned the children
#mainmenu {
position:fixed;
top: 300px;
right: -50px;
height:1px; width:1px;
}
#mainmenu div {
position:absolute;
right:0;
color: #333333;
text-decoration: none;
font-size: 22px;
font-weight: 500;
width: 100px;
height: 100px;
background: #333333;
text-align: center;
line-height: 100px;
transition: all 1s ease;
-webkit-transform: rotate(45deg);
}
a {
display: block;
color:white;
text-decoration: none;
transition: all 0.7s ease;
}
#menu:hover {
background: #FFFFFF;
}
#menu:hover a {
color:black;
}
#mainmenu:hover #menu ~ #home {
transition: all 0.3s ease;
-webkit-transform: rotate(45deg) translate(0px, 105px) perspective(350px);
}
#mainmenu:hover #menu ~ #photos {
transition: all 0.3s ease;
transition-delay: 0.3s;
-webkit-transform: rotate(45deg) translate(0px, 210px) perspective(350px);
}
#mainmenu:hover #menu ~ #video {
transition: all 0.3s ease;
-webkit-transform: rotate(45deg) translate(-105px, 0px) perspective(350px);
}
#mainmenu:hover #menu ~ #calendar {
transition: all 0.3s ease;
transition-delay: 0.3s;
-webkit-transform: rotate(45deg) translate(-210px, 0px) perspective(350px);
}
Demo here