如何更改此 CSS 以减少下拉效果的错误？

Question

我在下面提供了我的 CSS 和 HTML 。 我正在尝试完成我的下拉菜单，但它存在一个问题，使过渡不太顺利。 很难用语言来解释它在做什么。

我尝试更改display 、 max-height 、 padding和margin但没有结果。 也许我需要向它添加一些 JavaScript 而不是 CSS？ 任何可以指出的建议或问题都会很棒。

 #navigation { height: 100px; padding: 10px 3px 3px; background-color: #FFF; margin-bottom: 210px; border-radius: 5px; } #nav-container { display: table; margin: 10px auto; } #nav-items { list-style-type: none; margin-left: -45px; margin-top: -26px; } #nav-items li { display: inline-block; vertical-align: top; width: 400px; } /* nav-dropdown */ #dropdown { display: block; position: absolute; text-align: center; width: 300px; height: 50px; } #dropdown p { font-family: 'Work Sans', sans-serif; font-size: 35px; letter-spacing: 5px; display: table-cell; margin: 0; cursor: pointer; background-color: transparent; text-align: center; } #extensions { display: table; border-collapse: separate; border-spacing: 40px; height: 50px; width: 350px; } .label { font-family: 'Work Sans', sans-serif; font-size: 35px; letter-spacing: 5px; text-align: center; position: absolute; width: 300px; } #dropdown-content { position: absolute; margin: 0 auto; opacity: 0; width: 300px; height: 50px; background-color: #C9C9C9; border-radius: 8px; box-shadow: 1px 1px 50px 0px white; z-index: 1; overflow-y: hidden; transition-property: all; transition-duration: 0.5s; transition-timing-function: cubic-bezier(0, 1, 0.5, 1); } .nav-dropdown-container {width: 350px;height: 800px;} #dropdown-content p { font-size: 20px; font-family: 'Work Sans', sans-serif; font-size: 30px; letter-spacing: 2px; } #dropdown-content:hover { opacity: 1; max-height: 500px; padding-top: 1em; padding-bottom: 1em; margin-top: 50px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; display: block; } #dropdown-content:hover p { display: block; text-decoration: none; transition: 0.5s; } #dropdown-content p {display: none;} #dropdown-link {color: white;} #dropdown-link:link { color: white; text-decoration: none; } #dropdown-link:hover { color: lightgrey; }

 <nav id="navigation"> <div id="nav-container"> <ul id="nav-items"> <li> <div id="extensions"> <div class="nav-dropdown-container"> <div id="dropdown"> <p class="label">TEST</p> <div id="dropdown-content"> <p><a id="dropdown-link" href="hello.html">HELLO</a></p> <p><a id="dropdown-link" href="world.html">WORLD</a></p> </div> </div> </div> </div> </li> </ul> </div> </nav>

Answer 1

正如评论中所述，原因是当:hover状态在#dropdown-content上触发时，鼠标光标快速进入和离开元素导致状态反复快速打开和关闭，从而导致 janky 转换。

最快的解决方法是：您应该更改选择器，以便将:hover状态绑定到标签和下拉内容的最近公共祖先，即#dropdown 。

所以你应该改变这个：

#dropdown-content:hover { ... }
#dropdown-content:hover p { ... }

...到这个：

#dropdown:hover #dropdown-content { ... }
#dropdown:hover #dropdown-content p { ... }

这当然是一个权宜之计，因为我发现您的标记，以实现简单的下拉作用不必要的臃肿。

 #navigation { height: 100px; padding: 10px 3px 3px; background-color: #FFF; margin-bottom: 210px; border-radius: 5px; } #nav-container { display: table; margin: 10px auto; } #nav-items { list-style-type: none; margin-left: -45px; margin-top: -26px; } #nav-items li { display: inline-block; vertical-align: top; width: 400px; } /* nav-dropdown */ #dropdown { display: block; position: absolute; text-align: center; width: 300px; height: 50px; } #dropdown p { font-family: 'Work Sans', sans-serif; font-size: 35px; letter-spacing: 5px; display: table-cell; margin: 0; cursor: pointer; background-color: transparent; text-align: center; } #extensions { display: table; border-collapse: separate; border-spacing: 40px; height: 50px; width: 350px; } .label { font-family: 'Work Sans', sans-serif; font-size: 35px; letter-spacing: 5px; text-align: center; position: absolute; width: 300px; } #dropdown-content { position: absolute; margin: 0 auto; opacity: 0; width: 300px; height: 50px; background-color: #C9C9C9; border-radius: 8px; box-shadow: 1px 1px 50px 0px white; z-index: 1; overflow-y: hidden; transition-property: all; transition-duration: 0.5s; transition-timing-function: cubic-bezier(0, 1, 0.5, 1); } .nav-dropdown-container { width: 350px; height: 800px; } #dropdown-content p { font-size: 20px; font-family: 'Work Sans', sans-serif; font-size: 30px; letter-spacing: 2px; } #dropdown:hover #dropdown-content { opacity: 1; max-height: 500px; padding-top: 1em; padding-bottom: 1em; margin-top: 50px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; display: block; } #dropdown:hover #dropdown-content p { display: block; text-decoration: none; transition: 0.5s; } #dropdown-content p { display: none; } #dropdown-link { color: white; } #dropdown-link:link { color: white; text-decoration: none; } #dropdown-link:hover { color: lightgrey; }

 <nav id="navigation"> <div id="nav-container"> <ul id="nav-items"> <li> <div id="extensions"> <div class="nav-dropdown-container"> <div id="dropdown"> <p class="label">TEST</p> <div id="dropdown-content"> <p><a id="dropdown-link" href="hello.html">HELLO</a></p> <p><a id="dropdown-link" href="world.html">WORLD</a></p> </div> </div> </div> </div> </li> </ul> </div> </nav>