CSS奇怪的行为：溢出和margin-left

Question

我正在努力为我的网站菜单做一个很好的转换：当用户将鼠标悬停在父项目上时，孩子会向下滑动，当鼠标离开时，它们应该重新启动。但他们没有，如fiddle所示。然后我在SO上寻求帮助，并指出使用overflow: hidden;方法并仅转换height。好的。但是，这隐藏了我的子项目的子项目，如下面的代码段所示：

ul {
  list-style: none;
  padding: 0;
}

li {
  width: 180px;
}

#menu ul ul {
  position: absolute;
  overflow: hidden;
  background: red none repeat scroll 0 0;
}

#menu ul li {
  position: relative;
}

#menu ul ul li {
  height: 0;
  transition: height 0.2s ease 0s;
}

#menu ul ul ul {
  margin-left: 100%;
  top: 0;
}

#menu ul li:hover>ul>li {
  height: 32px;
}

<nav id="menu">
  <ul>
    <li>Parent Item
      <ul>
        <li>Child Item</li>
        <li>Child Item &gt;
          <ul>
            <li>Child Child Item 1</li>
            <li>Child Child Item 2</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</nav>

因此，基本上“儿童儿童项目1”和“儿童儿童项目2”项目对用户是不可见的。如何在鼠标悬停/离开时同时进行向下滑动/向上滑动并显示两个子项目？它可以在纯CSS中完成吗？

Answer 1

除了opacity为0之外，您可以将li上的初始height设置为0。

在:hover上，将opacity更改为1.请注意，transition效果中未包含不透明度。我认为立即改变可能看起来更好。

<强>更新

我认为不是使用opacity而是将初始font-size设置为0并且按比例放大会产生更平滑的效果。为清晰起见，我已在触发器和菜单中添加了类。

＆＃13;

＆＃13;

* {
  cursor: pointer;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  width: 180px;
}

#menu ul ul {
  position: absolute;
  background: red none repeat scroll 0 0;
}

#menu ul li {
  position: relative;
}

.dropdown-one li,
.dropdown-two li {
  height: 0;
  font-size: 0;
  transition: height 0.2s ease 0s;
}

#menu ul ul ul {
  margin-left: 100%;
  top: 0;
}

.dropdown-trigger-one:hover .dropdown-one>li,
.dropdown-trigger-two:hover .dropdown-two>li {
  height: 32px;
  font-size: 1em;
}

＆＃13;

<nav id="menu">
  <ul>
    <li class="dropdown-trigger-one">Parent Item
      <ul class="dropdown-one">
        <li>Child Item</li>
        <li class="dropdown-trigger-two">Child Item &gt;
          <ul class="dropdown-two">
            <li>Child Child Item 1</li>
            <li>Child Child Item 2</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</nav>

＆＃13;

＆＃13;

＆＃13;