html - 如何使悬停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 ;
}

或者使用 left: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;
}