Question

我的标题中有一个无序列表菜单，在父列表项上有子菜单。我一直试图设置：hover伪类，当光标移动到链接上时，子菜单会淡入淡出。

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

我的代码：

.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

左-9999em并且auto无法进行转换。汽车不是一个数字。

您可以使用指针事件来避免这种情况，并删除左侧的coordonates：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;和李的相对位置：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.

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

如何使hover css菜单淡入淡出？

2 个答案: