CSS导航菜单:在元素消失后鼠标消失

Question

我的HTML菜单附加了以下CSS样式，我在菜单中添加了一个：after元素以创建一个斜杠状按钮。加载和将鼠标悬停时看起来不错，但是当菜单卷起时，：after 元素消失了。当我检查我的 dom 时，它看起来仍然存在但不可见。将鼠标悬停在项目上会显示它，直到我鼠标退出。

.HTML：

<nav id="menu">
    <ul class="navigation">
        <a  class="main active" href="#">Navigation</a>
        <li class="n1"><a href="#">Item</a></li>
        <li class="n2"><a href="#">Item</a></li>
        <li class="n3"><a href="#">Item</a></li>
        <li class="n4"><a href="#">Item</a></li>
        <li class="n5"><a href="#">Item</a></li>
    </ul>
</nav>

.CSS：

nav#menu {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 100;
}
.navigation {
    opacity: 0.4;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 160px;
    height: 40px;
    background: black;
    position: relative;
    z-index: 100;
  }
  .navigation:after {
    content: " ";
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    border-left: 40px solid black;
    top: 0;
    margin-top: -40px;
    left: 100%;
    position: absolute;
    z-index: 100;
  }
  .navigation, .navigation a.main {
/*  border-bottom-right-radius: 4px;
    -webkit-border-bottom-right-radius: 4px;
    -moz-border-radius-bottomright: 4px;*/
  }
  .navigation:hover, .navigation:hover a.main {
    opacity: 1;
    border-bottom-right-radius: 0px;
    -webkit-border-bottom-right-radius: 0px;
    -moz-border-radius-bottomright: 0px;
  }
  .navigation a.main {
    display: block;
    height: 40px;
    font: bold 15px/40px arial, sans-serif;
    text-align: left;
    padding-left: 10px;
    text-decoration: none;
    color: #FFF;
    -webkit-transition: 0.2s ease-in-out;
    -o-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
    position: relative;
    z-index: 100;
  }
  .navigation:hover a.main {
    color: rgba(255, 255, 255, 0.6);
    background: rgba(0, 0, 0, 0.04);
  }
  .navigation li {
    width: 160px;
    height: 40px;
    background: #F7F7F7;
    font: normal 12px/40px arial, sans-serif !important;
    color: #999;
    text-align: center;
    margin: 0;
    -webkit-transform-origin: 50% 0%;
    -o-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-transform: perspective(350px) rotateX(-90deg);
    -o-transform: perspective(350px) rotateX(-90deg);
    transform: perspective(350px) rotateX(-90deg);
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
    -webkit-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
  }
  .navigation li:nth-child(even) {
    background: #F5F5F5;
  }
  .navigation li:nth-child(odd) {
    background: #EFEFEF;
  }
  .navigation li.n1 {
    -webkit-transition: 0.2s linear 0.8s;
    -o-transition: 0.2s linear 0.8s;
    transition: 0.2s linear 0.8s;
  }
  .navigation li.n2 {
    -webkit-transition: 0.2s linear 0.6s;
    -o-transition: 0.2s linear 0.6s;
    transition: 0.2s linear 0.6s;
  }
  .navigation li.n3 {
    -webkit-transition: 0.2s linear 0.4s;
    -o-transition: 0.2s linear 0.4s;
    transition: 0.2s linear 0.4s;
  }
  .navigation li.n4 {
    -webkit-transition: 0.2s linear 0.2s;
    -o-transition: 0.2s linear 0.2s;
    transition: 0.2s linear 0.2s;
  }
  .navigation li.n5 {
    border-radius: 0px 0px 4px 4px;
    -webkit-transition: 0.2s linear 0s;
    -o-transition: 0.2s linear 0s;
    transition: 0.2s linear 0s;
  }
  .navigation:hover li {
    -webkit-transform: perspective(350px) rotateX(0deg);
    -o-transform: perspective(350px) rotateX(0deg);
    transform: perspective(350px) rotateX(0deg);
    -webkit-transition: 0.2s linear 0s;
    -o-transition: 0.2s linear 0s;
    transition: 0.2s linear 0s;
  }
  .navigation:hover .n2 {
    -webkit-transition-delay: 0.2s;
    -o-transition-delay: 0.2s;
    transition-delay: 0.2s;
  }
  .navigation:hover .n3 {
    -webkit-transition-delay: 0.4s;
    -o-transition-delay: 0.4s;
    transition-delay: 0.4s;
  }
  .navigation:hover .n4 {
    transition-delay: 0.6s;
    -o-transition-delay: 0.6s;
    transition-delay: 0.6s;
  }
  .navigation:hover .n5 {
    -webkit-transition-delay: 0.8s;
    -o-transition-delay: 0.8s;
    transition-delay: 0.8s;
  }

我在这里创建了一个小提琴来演示这个问题：http://jsfiddle.net/u5f94f4y/

Answer 1

首先，看起来它是Chrome中的一个错误（你在Chrome中测试过它，不是吗？;-））在FF中，你的小提琴工作正常，即使看起来有点丑。正如我发现的那样，它以某种方式与不透明度有关。因此，我可以建议的解决方案是对角线边缘最多移动#menu并单独设置其不透明度。小提琴叉来了。