菜单项颜色徘徊

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/