CSS3 меню разворачивается, пропадает на парении

Question

Я сделал меню с переходами в CSS3, но проблема в том, что кнопки, которые разворачиваются пропадают, когда я пытаюсь навести на них, из-за переход, который просто установить на MainMenu DIV ,

Я мог бы вам помочь!

Вот мой jsfiddle: http://jsfiddle.net/7zn2D/

Вот мой код:

<div id="mainmenu"> 

    <div id="menu"><a href="#">MENU</a></div> 
    <div id="home"><a href="#">HOME</a></div> 
    <div id="video"><a href="#">VIDEO</a></div> 
    <div id="photos"><a href="#">>PHOTO'S</a></div> 
    <div id="calendar"><a href="#">CALENDAR</a></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

Вы должны применить :hover событие к родителю, #mainmenu. Для того, чтобы сделать это, я сделал #mainmenu есть position:fixed и абсолютно позиционирован детей

#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