添加旋轉懸停CSS中的菜單

Question

我正在使用css旋轉懸停的菜單，但我遇到了問題。

我想要實現的是以下內容。

當用戶將鼠標懸停在圖像上時，它會旋轉45°，而菜單顯示在下方。 其實圖像「+」不斷重置到原始位置，菜單消失。

我無法管理顯示菜單和旋轉45°的圖像「+」。

這裏是小提琴： http://jsfiddle.net/4Ts7n/7/

你recommandations將是非常歡迎的，謝謝。

HTML

<header class="clearfix"> 
<nav> 
<div class="cross"><img src="http://www.acielouvert.net/dm/images/nav_plus.png" width="221" height="221" /></div> 
<ul> 
<li>PROJET</li> 
<li>PRESSE</li> 
<li>EXHIBITION</li> 
<li>CONTACT</li> 
</ul> 
</nav> 
</header> 

CSS

body { 
background-color: #000; 
} 

nav ul { 
list-style: none; 
color: #fff; 
font-size: 3.5rem; 
text-align: center; 
line-height: 3.5rem; 
float: left; 
opacity: 0; 

-webkit-transition: opacity 1s ease-in-out; 
-moz-transition: opacity 1s ease-in-out; 
-ms-transition: opacity 1s ease-in-out; 
-o-transition: opacity 1s ease-in-out; 
transition: opacity 1s ease-in-out; 

-webkit-transition-duration: 0.8s; 
-moz-transition-duration: 0.8s; 
-o-transition-duration: 0.8s; 
transition-duration: 0.8s; 

-webkit-transition-property: -webkit-transform; 
-moz-transition-property: -moz-transform; 
-o-transition-property: -o-transform; 
overflow:hidden; 
} 

nav :hover { 
filter: alpha(opacity=1); 
opacity: 1; 
} 

nav li { 
color: #fff; 
} 

.cross { 
margin: 55px 0 0 100px; 
position: fixed; 
text-align: left; 

-webkit-transition-duration: 0.8s; 
-moz-transition-duration: 0.8s; 
-o-transition-duration: 0.8s; 
transition-duration: 0.8s; 

-webkit-transition-property: -webkit-transform; 
-moz-transition-property: -moz-transform; 
-o-transition-property: -o-transform; 
overflow:hidden; 
} 

.cross:hover { 
-webkit-transform:rotate(45deg); 
-moz-transform:rotate(45deg); 
-o-transform:rotate(45deg); 
} 

Answer 1

您需要懸停改變爲nav:hover .cross，而不是.cross:hover

Example

，如果你做同樣的你的UL它會停止閃爍e ffect：

nav:hover ul { 
    filter: alpha(opacity=1); 
    opacity: 1; 
} 

Example