在悬停CSS上显示下拉菜单

Question

Can't style menu for sub menu items to dropdown on hover. Now if I add sub items they then align in one line in the final menu like other items and run into items on the right side and the parent item goes above them and everything become messy. The screenshot: https://gyazo.com/834837690579fee013cdb6570ab7f317 After I added this CSS below - the sub menu items don't show up at all. The parent item in question: Ещё

My frightening code:

 .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

you can try to make component for the child menu and use @HostListener('mouseenter',['$event']) and @HostListener('mouseleave', ['$event']) . You can display childs with *ngIf or 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

Note that you're previously targetting: .menu-top ul li to display:none;

Which in fact you're targetting the wrong selector: .menu-top .menu-item-has-children:not(.off-canvas):hover>.sub-menu

If you change into: .menu-top .menu-item-has-children:not(.off-canvas):hover .sub-menu li it would show up on hover .

---

Explanation:

Your HTML structure was: div.header-menu → ul.menu-top → bunch of li.menu-item...

where one of them was li.menu-item-has-children which has the following child: ul.sub-menu → li.menu-item.

More about selector: 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

Navbar

    <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>