菜單項顏色徘徊

Question

所以我做它看起來像這樣的代碼時不發生變化： - http://codepen.io/anon/pen/rpAGv

問題是，當你將鼠標懸停在不改變顏色的菜單項。但是，如果您將鼠標懸停一點，則會顯示顏色的變化。我怎樣才能解決這個問題？我知道它與Z指數有關，但我無法弄清楚什麼。

CSS：

@import url(http://fonts.googleapis.com/css?family=Open+Sans:100,300,400,700); 
*, 
*::before, 
*::after { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

body { 
    font-family: 'Open Sans', Helvetica, Arial, sans-serif; 
} 

a { 
    display: block; 
    width: 100%; 
    height: 100%; 
} 

.menu-opener, .menu-opener:hover, .menu-opener.active, .menu-opener-inner, .menu-opener-inner::before, .menu-opener-inner::after, .menu, .menu.active { 
    -webkit-transition: 250ms all; 
    transition: 250ms all; 
} 

.menu-opener { 
    cursor: pointer; 
    height: 64px; 
    position: absolute; 
    top: 2%; 
    right: 1%; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
    width: 64px; 
} 
.menu-opener:hover, .menu-opener.active { 
    background: #231F20; 
} 

.menu-opener-inner { 
    background: #000; 
    height: .5rem; 
    margin-left: .75rem; 
    margin-top: 1.75rem; 
    width: 2.5rem; 
} 
.menu-opener-inner::before, .menu-opener-inner::after { 
    background: #000; 
    content: ''; 
    display: block; 
    height: .5rem; 
    width: 2.5rem; 
} 

.menu-opener-inner::before { 
    -webkit-transform: translateY(-0.75rem); 
    -ms-transform: translateY(-0.75rem); 
    transform: translateY(-0.75rem); 
} 
.menu-opener-inner::after { 
    -webkit-transform: translateY(0.25rem); 
    -ms-transform: translateY(0.25rem); 
    transform: translateY(0.25rem); 
} 
.menu-opener-inner.active { 
    background: transparent; 
} 
.menu-opener-inner.active::before { 
    background: #fff; 
    -webkit-transform: translateY(0rem) rotate(-45deg); 
    -ms-transform: translateY(0rem) rotate(-45deg); 
    transform: translateY(0rem) rotate(-45deg); 
} 
.menu-opener-inner.active::after { 
    background: #fff; 
    -webkit-transform: translateY(-0.5rem) translateX(0rem) rotate(45deg); 
    -ms-transform: translateY(-0.5rem) translateX(0rem) rotate(45deg); 
    transform: translateY(-0.5rem) translateX(0rem) rotate(45deg); 
} 

.menu { 
    background: #231F20; 
    color: transparent; 
    height: 64px; 
    position: absolute; 
    top: 2%; 
right: 1%; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
    width: 0rem; 
    z-index: -1; 
} 
.menu.active { 
    width: -webkit-calc(100% - 2rem); 
    width: calc(100% - 2rem); 
    height: calc(100% - 1rem); 
} 
.menu.active .menu-link { 
    color: white; 
} 

.menu-inner { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-orient: horizontal; 
    -webkit-box-direction: normal; 
    -webkit-flex-direction: row; 
    -ms-flex-direction: row; 
    flex-direction: row; 
    height: 100%; 
    list-style-type: none; 
    margin: 0; 
    margin-left: 4rem; 
    padding: 0; 
} 

.menu-link { 
    color: transparent; 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-flex: 1; 
    -webkit-flex: 1 1 auto; 
    -ms-flex: 1 1 auto; 
    flex: 1 1 auto; 
    font-size: 2rem; 
    font-weight: 100; 
    height: 100%; 
    text-align: center; 
    text-decoration: none; 
} 
.menu-link li { 
    margin: auto; 
} 

@media screen and (max-width: 768px) { 
    .menu { 
    height: auto; 
    } 
    .menu-inner { 
    display: block; 
    } 
    .menu-link { 
    padding: 10px 0; 
    font-size: 1.2em; 
    } 
    .menu.active { 
    width: -webkit-calc(100% - 0.5rem); 
    width: calc(100% - 0.5rem); 
    } 
} 

p { 
    letter-spacing:2px; 
    -webkit-animation: myanim 1s; 
      animation: myanim 1s; 
} 

span { 
    display: block; 
    text-align: center; 
    -webkit-animation: center 1s; 
    animation: center 1s; 
} 

@-webkit-keyframes center { 
    0% { -webkit-transform: scaleX(0.1); } 
    100% { -webkit-transform: scaleX(1); } 
} 
@keyframes center { 
    0% { transform: scaleX(0.1); } 
    100% { transform: scaleX(0.1); } 
} 

@-webkit-keyframes myanim { 
    0% { letter-spacing: -2px; } 
    100% { letter-spacing:2px; } 
} 
@keyframes myanim { 
    0% { letter-spacing: -2px; } 
    100% { letter-spacing:2px; } 
} 

Answer 1

我改變了menuopener有2 z-index，並改變了菜單類有一個z-index 1。然後加入.menu-link:hover{ background: pink !important;}見下面我撥弄:)

http://jsfiddle.net/benjih111/wz28k13w/