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

好吧，您无需在?>上使用position:absolute，因为您正在使用它，因此它正在创建另一层ul。您已使用menu，或css hover selector某个performs，直到您的styling出现在目标mouse上时，只要它超出范围隐藏element {1}}元素lorem li出现，所以要解决此问题，您可以使用jQuery something事件监听器，如下所示，

选中jsFiddle。

如果您只需要在click代码上执行transition，请使用ul。由于visibility无法使用transition。

＆＃13;

display

＆＃13;

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;
}

＆＃13;

Answer 2

CSS

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

JSFiddle example

Answer 3

1）使用display代替visibility

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

完整代码：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

CSS菜单下拉下拉项目

3 个答案: