при наведении указывается скрытие 2-го и 3-го уровня меню - PullRequest
Новая
       0

при наведении указывается скрытие 2-го и 3-го уровня меню

1 голос
/ 14 мая 2019

Это мой сгенерированный HTML & CSS 

//current menu css
.main-navigation {
  padding-top: 2px;

  ul {
    padding: 0;
    margin: 0;
  }

  ul:before,
  ul:after {
    content: " ";
    display: table;
  }

  ul:after {
    clear: both;
  }

  @mixin atMedium {
    float: left;
    margin-right: 20px;
  }
}

.main-navigation li {
  list-style: none;

  @mixin atMedium {
    float: left;
    padding-left: 20px;
  }
}

.main-navigation a {
  display: block;
  padding: 10px 20px;
  color: #FFF;
  text-decoration: none;
  font-weight: 300;
  @mixin atMedium {
    display: inline-block;
    padding: 0;
  }
}

.main-navigation .current-menu-item a, .main-navigation a:hover {
  color: $beige;
}

//what I added to try to create the dropdown
.sub-menu {
  display: none;
  visibility: hidden;
  opacity: 0;
}

#menu-main-menu li:hover .sub-menu {
  display: none;
  visibility: hidden;
  opacity: 0;
}

Мой HTML: 

<nav class="main-navigation">
  <div class="menu-main-menu-container">
    <ul id="menu-main-menu" class="menu">
      <li id="menu-item-52"><a href="#">Home</a></li>
      <li id="menu-item-65"><a href="#">Resources</a>
        <ul class="sub-menu">
          <li id="menu-item-60"><a href="#">Moving Tips</a></li>
          <li id="menu-item-64"><a href="#">Relocation Guide</a></li>
          <li id="menu-item-66"><a href="#">66</a>
            <ul class="sub-menu">
              <li id="menu-item-69"><a href="#">Why Should a Seller use a Real Estate Agent?</a></li>
              <li id="menu-item-62"><a href="#">Pricing Your Home</a></li>
              <li id="menu-item-63"><a href="#">Probate</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li id="menu-item-57"><a href="">Contact</a></li>
    </ul>
  </div>
</nav>

Когда это отображается как есть, отображаются все пункты меню. Я хотел бы настроить его так, чтобы отображался только верхний уровень, а затем, если вы наводите курсор мыши на него, открывается второй уровень, и, наконец, если вы просматриваете третий уровень, он будет отображаться, если вы наводите курсор на элемент, имеющий 3-й уровень в нем.

CSS, который я использовал, работает для 2-го уровня. Но проблема в том, что при наведении курсора на элементы 2-го уровня все подменю отображаются снова. Я думаю, что мне нужно ориентироваться только на версии 2-го уровня подменю отдельно, но я не уверен, что это правильно, или я просто что-то пропустил.

Это фактический HTML меню, сгенерированный Wordpress: 

<div class="menu-main-menu-container">
<ul id="menu-main-menu" class="menu">
    <li id="menu-item-52" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-52"><a href="http://calibre.local/">IdaHome</a></li>
    <li id="menu-item-65" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-65"><a href="http://calibre.local/resources/">Resources</a>
        <ul class="sub-menu">
            <li id="menu-item-60" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-37 current_page_item menu-item-60"><a href="http://calibre.local/moving-tips/" aria-current="page">Moving Tips</a></li>
            <li id="menu-item-64" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-64"><a href="http://calibre.local/relocation-guide/">Relocation Guide</a></li>
            <li id="menu-item-66" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-66"><a href="http://calibre.local/sellers/">Sellers</a>
            <ul class="sub-menu">
                <li id="menu-item-69" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-69"><a href="http://calibre.local/why-should-a-seller-use-a-real-estate-agent/">Why Should a Seller use a Real Estate Agent?</a></li>
                <li id="menu-item-62" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-62"><a href="http://calibre.local/pricing-your-home/">Pricing Your Home</a></li>
                <li id="menu-item-63" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-63"><a href="http://calibre.local/probate/">Probate</a></li>
            </ul>
        </li>
            <li id="menu-item-54" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-54"><a href="http://calibre.local/buyers/">Buyers</a>
            <ul class="sub-menu">
                <li id="menu-item-68" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-68"><a href="http://calibre.local/why-should-a-buyer-use-a-real-estate-agent/">Why Should a Buyer use a Real Estate Agent?</a></li>
                <li id="menu-item-55" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-55"><a href="http://calibre.local/buying-a-short-sale-property/">Buying a Short Sale Property</a></li>
                <li id="menu-item-56" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-56"><a href="http://calibre.local/closing-costs/">Closing Costs</a></li>
            </ul>
        </li>
            <li id="menu-item-67" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-67"><a href="http://calibre.local/short-sale-and-foreclosures/">Short Sale and Foreclosures</a></li>
        </ul>
    </li>
    <li id="menu-item-70" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-70"><a href="#">Communities</a>
    <ul class="sub-menu">
        <li id="menu-item-58" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-58"><a href="http://calibre.local/home-school-information/">Home School Information</a></li>
        <li id="menu-item-71" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-71"><a href="#">Things to do</a></li>
    </ul>
    </li>
    <li id="menu-item-53" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-53"><a href="http://calibre.local/about-josh/">About Josh</a></li>
    <li id="menu-item-61" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-61"><a href="http://calibre.local/news/">News</a></li>
    <li id="menu-item-57" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-57"><a href="http://calibre.local/contact/">Contact</a></li>
</ul>
</div>

1 Ответ

1 голос
/ 14 мая 2019

Самый простой способ решить эту проблему - дать вашему третьему уровню другое имя класса. На самом деле, таргетинг по CSS .sub-menu повлияет на 2-й и 3-й уровни, и вы этого не хотите.

Однако, поскольку вы не можете редактировать WordPress CSS, вот решение, которое будет работать без добавления дополнительного класса:

См. Фрагмент 

nav ul {
  list-style: none;
}

.sub-menu {
  display: none;
}


#menu-main-menu li:hover .sub-menu {
  display: block;
}

#menu-main-menu li:hover .sub-menu li ul {
  display: none;
}

#menu-main-menu li:hover .sub-menu li:hover ul {
  display: block;
}

#menu-main-menu {
  display: block;
  opacity: 1;
}
<nav class="main-navigation">
  <div class="menu-main-menu-container">
    <ul id="menu-main-menu" class="menu">
      <li id="menu-item-52"><a href="#">Home</a></li>
      <li id="menu-item-65"><a href="#">Resources</a>
        <ul class="sub-menu">
          <li id="menu-item-60"><a href="#">Moving Tips</a></li>
          <li id="menu-item-64"><a href="#">Relocation Guide</a></li>
          <li id="menu-item-66"><a href="#">66</a>
            <ul class="sub-sub-menu">
              <li id="menu-item-69"><a href="#">Why Should a Seller use a Real Estate Agent?</a></li>
              <li id="menu-item-62"><a href="#">Pricing Your Home</a></li>
              <li id="menu-item-63"><a href="#">Probate</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li id="menu-item-57"><a href="">Contact</a></li>
    </ul>
  </div>
</nav>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...