如何将鼠标悬停在导航项上并打开下拉列表？

Question

我已经尝试了将鼠标悬停在导航项上的方法，但似乎都没有效果。 如果可能的话，我想用纯html / css来做。

我尝试过使用w3学校的方法和其他一些类似的方法，但不确定我做错了什么？

我想用html / css完成这个，因为它似乎是可能的，但如果不是我可以使用javascript

JSFiddle： https ：//jsfiddle.net/k82g3nmh/

 <div id="navigation" class="clearfix"> <ul id="nav" class="menu responsiveSelectFullMenu sf-js-enabled sf-arrows"> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-4 current_page_item menu-item-1114"><a href="" aria-current="page">Home</a></li> <li class="megamenu columns-5 menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1103"><a href="#" class="sf-with-ul">eLibrary</a> <ul class="sub-menu" style="display: none;"> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1132"><a href="" class="sf-with-ul">Research</a> <ul class="sub-menu" style="display: none; left: 203px; top: 0px;"> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1152"><a href="">General Research</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1151"><a href="">Business, Finance &amp; Job Searching</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1150"><a href="">Consumer &amp; DIY Information</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1149"><a href="">Family History</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1148"><a href="">Reading Resources</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1095"><a href="">Teens</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1097"><a href="">Kids</a></li> </ul> </li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1131"><a href="" class="sf-with-ul">eBooks &amp; eAudiobooks</a> <ul class="sub-menu" style="display: none; left: 203px; top: 0px;"> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4833"><a href="">Cloud Library</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4834"><a href="">Overdrive</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4851"><a href="">Loanable Kindles</a></li> </ul> </li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-4695"><a href="" class="sf-with-ul">Online Learning</a> <ul class="sub-menu" style="display: none; left: 203px; top: 0px;"> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4703"><a href="">Rosetta Stone</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4696"><a href="">Gale Courses</a></li> </ul> </li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1110"><a href="" class="sf-with-ul">eMagazines</a> <ul class="sub-menu" style="display: none; left: 203px; top: 0px;"> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1167"><a href="">RB Digital</a></li> </ul> </li> </ul> </li> <li class="megamenu columns-3 menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1104"><a href="#" class="sf-with-ul">Your Library</a> <ul class="sub-menu" style="display: none;"> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1140"><a href="" class="sf-with-ul">What We Offer</a> <ul class="sub-menu" style="display: none; left: 203px; top: 0px;"> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5176"><a href="">Library Rewards</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2377"><a href="">My Library Account</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1157"><a href="">Your Library Card</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1158"><a href="">Library Collection</a></li> </ul> </li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1138"><a href="" class="sf-with-ul">Reference &amp; Reader Resources</a> <ul class="sub-menu" style="display: none; left: 203px; top: 0px;"> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5308"><a href="">Hot Books</a></li> </ul> </li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1134"><a href="" class="sf-with-ul">Other Services</a> <ul class="sub-menu" style="display: none; left: 203px; top: 0px;"> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4510"><a href="">Passports</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1107"><a href="">Pay Online</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5539"><a href="">Museums</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1156"><a href="">Test Proctoring</a></li> </ul> </li> </ul> </li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1113"><a class="sf-with-ul">About</a> <ul class="sub-menu" style="display: none;"> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1127"><a href="" class="sf-with-ul">Library Board of Trustees</a> <ul class="sub-menu" style="display: none; left: -203px; top: 0px;"> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-5540"><a href="">Certified Results of April 2 Election</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-5412"><a href="">Library Budget Process</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4296"><a href="">Library Board Minutes &amp; Agendas</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3904"><a href="">Library Board Sponsorship Campaign</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1170"><a href="">Financials</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1129"><a href="">Policies</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1142"><a href="">Freedom of Information Act</a></li> </ul> </li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5110"><a href="">Library Volunteer Program</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4361"><a href="">Donations</a></li> </ul> </li> </ul> </div> 

Answer 1

尝试在CSS的末尾添加：

 #navigation .menu-item:hover > .sub-menu { display: block; } 

Answer 2

穆斯塔法几乎是对的：

#navigation .menu-item:hover > .sub-menu { display: block; }

在CSS的最后。

虽然它在你提供的小提琴中不起作用。 您还需要擦除所有内联样式style="display:none" 。 这里有一个工作小提琴：[1]： https ： //jsfiddle.net/16sr7faz/ 。 我建议你不要使用内联样式和CSS，但我不知道你的情况。