CSS3导航菜单

Question

我无法为我的菜单解决这两个问题。使用Chrome。

1. 子子菜单（Men，Women / Children）的小左指针箭头隐藏在列表后面。

这是所需的输出：



1. 理想情况下，子菜单应仅在父菜单上悬停时显示。 但是在这里，它们甚至在徘徊时也出现了。你可以看到这个，如果你把光标放在'投资组合'正下方大约10 px或'链接'下方20 px

   http://jsfiddle.net/mdB9z/

   nav ul li > ul li > ul:before
    {
     content:"";
      border-style:solid;
      border-width:0 9px 9px 9px;
     border-color:transparent transparent #2c3e50 transparent;
     width:0;
     height:0;
     position:absolute;
     left:0;
     top:15px;
     -webkit-transform:rotate(270deg);
    }
   

Answer 1

至于

1。）箭头

这似乎是箭头元素绝对定位的结果。你认为相对定位是个问题吗？因为如果没有，你可以使用它 - 只要你还应用z-index（例如1），它就会起作用。

nav ul li > ul li > ul:before {
    position:relative;
    left:0;
    top:15px;
    z-index: 1;
}

2.。可见性

如果您不想在鼠标悬停时触发:hover，则必须隐藏该元素。使用display:block至display:none或反之亦然取消或更确切地说跳过CSS3过渡，因此请使用visibility:visible代替visiblity:hidden。

nav ul li > ul {
    visibility: hidden;
}

nav ul li:hover > ul {
    visibility: visible;
}

请参阅this example。

这是你试图实现的目标吗？