jQuery下拉懸停菜單僅適用於第一個<li>

Question

我一直在嘗試獲取下拉懸停菜單以在屏幕上滑動。 由於某種原因，它只能與第一個菜單項一起使用，然后其他菜單項才出現。

我做錯了什么？

 $('.nav-main li ul').hide().removeClass('.drop-down'); $('.nav-main li').hover(function() { $('ul', this).stop().slideDown(1000); }, function() { $('ul', this).stop().slideUp(1000); }); 

 .nav-main { position: absolute; top: 0; height: 65px; width: 100%; text-align: center; } .nav-main ul { position: relative; margin: 0 auto; padding: 0; list-style: none; font-size: 22px; line-height: 100%; font-family: 'Futura W01 Bold', sans-serif; text-align: center; text-transform: uppercase; display: inline-block; width: 90%; height: inherit; } .nav-top { position: relative; margin: 0; padding: 0 66px 0 50px; float: none; display: inline-block; list-style: none; height: inherit; } .nav-top:first-child { padding-left: 0; } .nav-top:last-child { background-image: none; padding-right: 0; } .nav-top:last-child:after { content: none; } .nav-top > a { position: relative; display: block; margin: 0; color: #6f6f6f; text-decoration: none; padding-top: 20px; padding-bottom: 5px; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .nav-top a:hover, .nav-top.active a { color: #454545; border-bottom: 4px solid #00e9d9; text-decoration: none; } .nav-top ul { /*display: none;*/ position: absolute; left: -8.75px; width: 105%; top: calc(100% - 1px); } .nav-top:hover ul { /*display: inline;*/ position: absolute; top: calc(100% - 1px); left: -8.75px; width: 105%; /*-moz-transition: all 1.2s ease-in-out; -webkit-transition: all 1.2s ease-in-out; -ms-transition: all 1.2s ease-in-out; -o-transition: all 1.2s ease-in-out; transition: all 1.2s ease-in-out; */ } .nav-top li { float: center; background-color: #e9e9e9; padding-top: 16px; padding-bottom: 16px; } .nav-top li > a { position: relative; display: inline; margin: 0; color: #6f6f6f; text-decoration: none; padding-top: 20px; padding-bottom: 5px; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .nav-top:after { display: block; position: absolute; left: 100%; top: -17px; width: 22px; z-index: 1; transform: translateX(-50%); height: 100%; -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav class="nav-main" role="navigation"> <ul> <li class="nav-top"><a href="#welcome">Welcome</a></li> <li class="nav-top"><a href="#about">About</a> <ul class="drop-down"> <li><a href="#about">Services</a></li> <li><a href="#client">Clients</a></li> <li><a href="#press">Press</a></li> <li><a href="#leadership">Leadership</a></li> <li><a href="#twitter">Twitter</a></li> </ul> </li> <li class="nav-top"><a href="#contact">Contact</a></li> </ul> <span class="nav-arrow"></span> </nav> 

JS小提琴

Answer 1

移除height:inherit; 從.nav-main ul ，它將解決此問題。 存在問題是因為dropdown .drop-down繼承了父li的高度，導致幻燈片動畫僅對父li的高度進行了動畫處理。 我希望這是有道理的。

更新了FIDDLE 。

 $('.nav-main li ul').hide().removeClass('.drop-down'); $('.nav-main li').hover( function() { $('ul', this).slideDown(1000); }, function() { $('ul', this).slideUp(1000); } ); 

 .nav-main { position: absolute; top: 0; height: 65px; width: 100%; text-align: center; } .nav-main ul { position: relative; margin: 0 auto; padding: 0; list-style: none; font-size: 22px; line-height: 100%; font-family: 'Futura W01 Bold', sans-serif; text-align: center; text-transform: uppercase; display: inline-block; width: 90%; } .nav-top { position: relative; margin: 0; padding: 0 66px 0 50px; float: none; display: inline-block; list-style: none; height: inherit; /*background: transparent url(../images/nav-divide.png) no-repeat right center;*/ } .nav-top:first-child { padding-left: 0; } .nav-top:last-child { background-image: none; padding-right: 0; } .nav-top:last-child:after { content: none; } .nav-top > a { position: relative; display: block; margin: 0; color: #6f6f6f; text-decoration: none; padding-top: 20px; padding-bottom: 5px; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .nav-top a:hover, .nav-top.active a { color: #454545; border-bottom: 4px solid #00e9d9; text-decoration: none; } .nav-top ul { display: none; position: absolute; } .nav-top:hover ul { display: inline; position: absolute; top: calc(100% - 1px); left: -8.75px; width: 105%; /*-moz-transition: all 1.2s ease-in-out; -webkit-transition: all 1.2s ease-in-out; -ms-transition: all 1.2s ease-in-out; -o-transition: all 1.2s ease-in-out; transition: all 1.2s ease-in-out; */ } .nav-top li { float: center; background-color: #e9e9e9; padding-top: 16px; padding-bottom: 16px; /* background: transparent url(../images/nav-divide.png) no-repeat right center; background: transparent url(../images/nav-divide.png) no-repeat left center;*/ } .nav-top li > a { position: relative; display: inline; margin: 0; color: #6f6f6f; text-decoration: none; padding-top: 20px; padding-bottom: 5px; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .nav-top:after { content: url(../images/nav-divide.png); display: block; position: absolute; left: 100%; top: -17px; width: 22px; z-index: 1; transform: translateX(-50%); height: 100%; -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav class="nav-main" role="navigation"> <ul> <li class="nav-top"><a href="#welcome">Welcome</a> </li> <li class="nav-top"><a href="#about">About</a> <ul class="drop-down"> <li><a href="#about">Services</a> </li> <li><a href="#client">Clients</a> </li> <li><a href="#press">Press</a> </li> <li><a href="#leadership">Leadership</a> </li> <li><a href="#twitter">Twitter</a> </li> </ul> </li> <li class="nav-top"><a href="#contact">Contact</a> </li> </ul> <span class="nav-arrow"></span> </nav>