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

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

穆斯塔法几乎是对的：

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

在css的末尾。

虽然在你所提供的小提琴里是行不通的。您还需要擦除所有内联样式的style="display:none"。这里有一个有用的小提琴: 1：https://jsfiddle.net/16sr7faz/。我建议您不要同时使用内联样式和css，但我不知道您的情况。

Answer 2

尝试在CSS的末尾添加以下内容：

​

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

​