Question

无法为子菜单项设置样式菜单，以便将鼠标悬停在下拉菜单上。现在，如果我添加了子项，则它们将像其他项一样在最终菜单中排成一行，并碰到右侧的项，而父项位于其上方，并且一切都变得混乱。屏幕截图：https://gyazo.com/834837690579fee013cdb6570ab7f317 在下面添加此CSS之后-子菜单项根本不会显示。所涉及的父项：Ещё

我令人恐惧的代码：

.menu-top ul li {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 12px 16px;
  z-index: 1;
}

.menu-top .menu-item-has-children:not(.off-canvas):hover>.sub-menu {
  display: block;
  float: none;
  margin-top: 0;
  opacity: 1;
  position: absolute;
  left: 0;
  right: auto;
  top: auto;
  bottom: auto;
  height: auto;
  min-width: -moz-max-content;
  min-width: -webkit-max-content;
  min-width: max-content;
  transform: none;
}

<div class="header-menu">
  <ul id="menu-verhnee-menyu-1" class="menu-top">
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-274"><a href="http://localhost/samsklad/o-samsklade/">О СамСкладе</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-272"><a href="http://localhost/samsklad/boksy-i-tseny/">Боксы и цены</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-270"><a href="http://localhost/samsklad/fotogallereya/">Фото</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-273"><a href="http://localhost/samsklad/faq/">FAQ</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-271"><a href="http://localhost/samsklad/kontakty/">Контакты</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-539"><a href="http://localhost/samsklad/kalkulyator/">Калькулятор</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-572"><a href="http://localhost/samsklad/oplata/">Оплата</a></li>

    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-574"><a href="#">Ещё</a>
      <ul class="sub-menu">
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-575"><a href="http://localhost/samsklad/resheniya-dlya-biznesa/">Решения для бизнеса</a></li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-576"><a href="http://localhost/samsklad/resheniya-dlya-doma/">Решения для дома</a></li>

      </ul>
    </li>
  </ul>
</div>

Answer 1

您可以尝试为子菜单制作组件，并使用@HostListener('mouseenter',['$event'])和@HostListener('mouseleave', ['$event'])。您可以显示*ngIf或ngStyle的孩子：

@HostListener('mouseenter', ['$event'])
@HostListener('mouseleave', ['$event'])
onHover(event: MouseEvent) {
  this.visible = event.type === 'mouseenter' ? 'in' : 'out';
}

<ul class="sub-menu" *ngIf="visible">
  <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-575"><a href="http://localhost/samsklad/resheniya-dlya-biznesa/">Решения для бизнеса</a></li>
  <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-576"><a href="http://localhost/samsklad/resheniya-dlya-doma/">Решения для дома</a></li>
</ul>

Answer 2

请注意，您之前的定位目标是：.menu-top ul li至display:none;

实际上您定位的是错误的选择器：.menu-top .menu-item-has-children:not(.off-canvas):hover>.sub-menu

如果更改为：.menu-top .menu-item-has-children:not(.off-canvas):hover .sub-menu li，它将显示在hover上。

说明：

您的HTML结构为：div.header-menu→ul.menu-top→一堆li.menu-item...

其中一个是li.menu-item-has-children，其中有以下子对象：ul.sub-menu→li.menu-item.

有关选择器的更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

.menu-top ul li {
  display: none;
  /*position: absolute;*/
  /*you can comment out if necessary*/
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 12px 16px;
  z-index: 1;
}

.menu-top .menu-item-has-children:not(.off-canvas):hover .sub-menu li {
  display: block;
  /*float: none;
  margin-top: 0;
  opacity: 1;
  /*position: absolute; 
  left: 0;
  right: auto;
  top: auto;
  bottom: auto;
  height: auto;
  min-width: -moz-max-content;
  min-width: -webkit-max-content;
  min-width: max-content;
  transform: none;*/
  /*you can comment out if necessary*/
}

<div class="header-menu">
  <ul id="menu-verhnee-menyu-1" class="menu-top">
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-274"><a href="http://localhost/samsklad/o-samsklade/">О СамСкладе</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-272"><a href="http://localhost/samsklad/boksy-i-tseny/">Боксы и цены</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-270"><a href="http://localhost/samsklad/fotogallereya/">Фото</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-273"><a href="http://localhost/samsklad/faq/">FAQ</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-271"><a href="http://localhost/samsklad/kontakty/">Контакты</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-539"><a href="http://localhost/samsklad/kalkulyator/">Калькулятор</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-572"><a href="http://localhost/samsklad/oplata/">Оплата</a></li>

    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-574"><a href="#">Ещё</a>
      <ul class="sub-menu">
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-575"><a href="http://localhost/samsklad/resheniya-dlya-biznesa/">Решения для бизнеса</a></li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-576"><a href="http://localhost/samsklad/resheniya-dlya-doma/">Решения для дома</a></li>

      </ul>
    </li>
  </ul>
</div>

Answer 3

导航栏

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown
      </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
            </li>
        </ul>

    </div>
</nav>

<style>
    .dropdown:hover>.dropdown-menu {
        display: block;
    }
</style>

在悬停CSS上显示下拉菜单

3 个答案: