如何使悬停css菜单淡入淡出？

Question

我的标题中有一个无序列表菜单，其中包含父列表项的子菜单。 我一直在尝试设置 :hover 伪类，以便在将光标移到链接上时使子菜单淡入淡出。

问题是我只能让它们淡入，所以当我将光标移开时，它们不会淡出，它们会立即消失。 我不确定我做错了什么，但我在下面包含了第二个 jsfiddle，我已经成功地用一些更简单的 html 实现了我想要的效果。

示例 1：https://jsfiddle.net/ornbovv7/2/

示例 2：https://jsfiddle.net/aou6j8gz/1/

我的代码：

.header {
  width:100%;
  height:100px;
  background-color:#fff;
}

.content {
  width:100%;
  height:500px;
  background-color:pink;
}

nav.main-menu ul {
  position:relative;
  top:30px;
  list-style:none;
}

nav.main-menu ul li {
  cursor:pointer;
  display:inline-block;
  margin:10px 30px 10px 30px;
  padding:0px 20px 45px 20px;
}

nav.main-menu ul ul {
  position:absolute; 
  left:-999em;
  width:175px;
  display:block; 
  height:auto;
  margin:40px 0px 0px 0px;
  padding:0;
  box-shadow: 0 10px 20px rgba(0,0,0,0.05), 0 4px 6px rgba(0,0,0,0.1);
  background-color:#ffffff;
  opacity:0;

  transition: left 0s ease 0.6s, opacity 0.6s ease 0s;
}

nav.main-menu ul li:hover ul {
  left:auto;
  opacity:0.9;
  transition: left 0s ease 0s, opacity 0.6s ease 0s;
}

nav.main-menu ul ul li {
  position:relative;
  float: none;
  padding: 7px 10px 7px 10px;
}

nav.main-menu ul ul li a {
  display:inline-block;
}


<header class="header">

    <nav class="main-menu">
        <div>
            <ul id="menu-header-menu-1" class="menu">

                <li>link 1</li>

                <li>link 2
                     <ul class="sub-menu">
                        <li>sublink 1</li>
                        <li>sublink 2</li>
                        <li>sublink 3</li>
                        <li>sublink 4</li>
                        <li>sublink 5</li>
                    </ul>
                </li>
                <li>link 3
                </li>
            </ul>
        </div>
     </nav>

</header>

Answer 1

left -9999em 和 auto 不能进行转换。 auto 不是数字。

您可以使用指针事件来避免这种情况并删除左坐标：https://jsfiddle.net/ornbovv7/3/

nav.main-menu ul li ul {
  position:absolute; 
  width:175px;
    display:block; 
    height:auto;
    margin:40px 0px 0px 0px;
  padding:0;
  box-shadow: 0 10px 20px rgba(0,0,0,0.05), 0 4px 6px rgba(0,0,0,0.1);
    background-color:#ffffff;
  opacity:0;
    pointer-events:none;
    transition: opacity 0.6s ease 0s;
}

nav.main-menu ul li:hover ul {
  left:auto;
  pointer-events:auto;
  opacity:0.9;
  transition:  opacity 0.6s ease 0s ;
}

或使用左：0；和 li 在相对位置：https://jsfiddle.net/ornbovv7/4/ 此外，您确实需要为左过渡提供延迟，以便它在离开屏幕区域之前消失

nav.main-menu ul li {
  cursor:pointer;
  display:inline-block;
  margin:10px 30px 10px 30px;
  padding:0px 20px 45px 20px;
  position:relative;
}

nav.main-menu ul ul {
  position:absolute; 
  left:-999em;
  width:175px;
    display:block; 
    height:auto;
    margin:40px 0px 0px 0px;
  padding:0;
  box-shadow: 0 10px 20px rgba(0,0,0,0.05), 0 4px 6px rgba(0,0,0,0.1);
    background-color:#ffffff;
  opacity:0;

    transition: left 0s ease 0.6s, opacity 0.6s ease 0s;
}

nav.main-menu ul li:hover ul {
  left:0;
  opacity:0.9;
  transition: left 0s ease 1s, opacity 0.6s ease 0s;
}

Answer 2

一种方法是利用:not 伪标签，结合:hover。几年前我写了一篇关于类似例子的文章 - you can read it here 如果你有兴趣。

通过添加以下内容，我能够让您的第一个示例正常工作：

nav.main-menu ul li:not(:hover) ul {
  left:auto;
  opacity:0;
  transition: left 0s ease 0s, opacity 0.6s ease 0s;
}

Here is a link to the forked fiddle.

希望我正确理解了问题和目标。