CSS菜单下拉下推项目

Question

我有一个垂直导航菜单，上面有父项和非父项。我希望父母在悬停时显示他们的孩子页面，并且我希望这可以推动上面的项目。 HTML：

<nav class="main">
    <ul>
        <li>
            <a href="">Lorem</a>
            <ul>
                <li><a href="">Ipsum</a></li>
                <li><a href="">Dolor</a></li>
                <li><a href="">Sit</a></li>
                <li><a href="">Amet</a></li>
            </ul>
        </li>
        <li>Something</li>
    </ul>
</nav>

CSS：

nav.main ul ul {
    display: none
}

nav.main ul li:hover ul {
    display: block;
}

但是当鼠标离开父项时，子项消失并且菜单发生变化，这是令人不安的，因为鼠标的指针突然在不同的项上（例如：鼠标从“Amet”移动到“Something”）。所以我所做的是使用平滑过渡，但在这种情况下，“显示”不再起作用，“可见性”不会压低孩子，它们只是作为菜单上的第二层出现。在https://jsfiddle.net/LgvhLxya/1/ 的示例中，我希望在显示“Lorem”的孩子时将项目“Something”下推。

Answer 1

CSS

nav.main ul ul {
    height: 0;
    box-sizing: border-box;
    list-style: none;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    //padding: 10px;
    background-color: rgba(92, 91, 87, 0.9);
    -webkit-transition: opacity 600ms, height 600ms;
            transition: opacity 600ms, height 600ms;
}

nav.main ul li:hover ul {
    height: auto;
    visibility: visible;
    opacity: 1;
}

nav.main ul li:hover ul {
   padding-left: 10px;
}

nav.main ul li:hover ul a {
   color: #fff;
}

<nav class="main">
    <ul>
        <li>
            <a href="">Lorem</a>
            <ul>
                <li><a href="">Ipsum</a></li>
                <li><a href="">Dolor</a></li>
                <li><a href="">Sit</a></li>
                <li><a href="">Amet</a></li>
            </ul>
        </li>
        <li>Something</li>
    </ul>
</nav>

JSFiddle example

Answer 2

1)使用display 代替visibility

2)使用position: relative代替position: absolute;

完整代码：

nav.main ul ul {

    position: relative;
    list-style: none;
    opacity: 0;
    display: none;
    padding: 10px;
    background-color: rgba(92, 91, 87, 0.9);
    -webkit-transition: opacity 600ms, visibility 600ms;
    transition: opacity 600ms, visibility 600ms;
}

nav.main ul li:hover ul {
    display: block;
    opacity: 1;
}

<nav class="main">
    <ul>
        <li>
            <a href="">Lorem</a>
            <ul>
                <li><a href="">Ipsum</a></li>
                <li><a href="">Dolor</a></li>
                <li><a href="">Sit</a></li>
                <li><a href="">Amet</a></li>
            </ul>
        </li>
        <li>Something</li>
    </ul>
</nav>

Answer 3

嗯，没有必要在ul 上使用position:absolute，因为您正在使用它，因此它正在创建另一层menu。你已经使用了css hover selector，它可以工作或performs 某些styling 直到你的mouse 是目标element 一旦超出范围，它就会隐藏lorem li 元素something 出现，所以要解决这个问题，您可以使用 jQuery click 事件监听器，如下所示，

检查这个jsFiddle。

如果您只需要在ul 标记上执行transition，请使用visibility。因为transition 不能与display 一起使用。

nav.main > ul > li > ul {
  display: block;
  height:0px;
  visibility:hidden;
  opacity:0;
  transition:0.2s ease;
}

nav.main > ul  > li:hover > ul {
  height:80px;
  visibility:visible;
  opacity:1;
}

<nav class="main">
    <ul>
        <li>
            <a href="">Lorem</a>
            <ul>
                <li><a href="">Ipsum</a></li>
                <li><a href="">Dolor</a></li>
                <li><a href="">Sit</a></li>
                <li><a href="">Amet</a></li>
            </ul>
        </li>
        <li><a href="">Something</a></li>
        <li><a href="">Something</a></li>
        <li><a href="">Something</a></li>
    </ul>
</nav>