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并分别设置其不透明度。这是fiddle fork。

CSS导航菜单：鼠标移出后元素消失

1 个答案: