-1

I just can´t get it running. I have the "default" WordPress Menu. I created a seperate div directly under my header / menu. It is kind of a mega menu. In my head it´s just simple. But I can´t trigger the div to show up when I hover over the desired menu point.

I tried everything with css. But I think it´s not possible to trigger it with it as it isn´t a sibling or a parent div.

Do you have an idea, because it can´t be that crazy right? I have hidden the div with display:none and when hovering over the "#menu-item-136 > a:nth-child(1)" it should go again to display:block. Do I think to easy on that one?

#menu-item-136 > a:nth-child(1):hover + .mega-menu {display:block;}
#menu-item-136 > a:nth-child(1):hover ~ .mega-menu {display:block;}
#menu-item-136 > a:nth-child(1):hover > .mega-menu {display:block;}

does nothing.

Can u please help. :/

Adding codes:

<li id="menu-item-136" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-136 aux-menu-depth-0 aux-menu-root-2 aux-menu-item">
            <a href="#" class="aux-item-content">
                <span class="aux-menu-label"><i aria-hidden="true" class="services auxicon-list"></i>&nbsp;&nbsp;Leistungen</span>
            <span class="aux-submenu-indicator"></span></a>

</br>
</br>   
  
<div class="mega-menu">content</div>

I already solved it myself. Thanks. I also don´t know why this simple question needs to be "Closed because it needs debugging details"!? How much easier can I make the question: One Menupoint, one div, show div while hovering over menupoint?!?! I found out with a simple javascript with mouseover. You can delete this question if it was to difficult. Thanks.

Artan
  • 63
  • 13
  • If the div is not a child or sibling, you are not going to be able to walk up the tree and back down with CSS. – epascarello Nov 23 '20 at 18:53
  • 1
    without seeing the html of its elements no response is possible – Mister Jojo Nov 23 '20 at 18:54
  • I put in the codes for u. Please consider, that the menu is the themes default menu. I don´t know if this makes it harder to edit it for the result. Also "display:none" is not applied yet, so you can see the div. Hope u can help. – Artan Nov 23 '20 at 19:17

1 Answers1

1

li .mega-menu {
  display: none;
}
#menu li > a:hover ~ div {
  display: block !important;
}
<ul id="menu">
  <li id="menu-item-136" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-136 aux-menu-depth-0 aux-menu-root-2 aux-menu-item">
    <a href="#" class="aux-item-content">
      <span class="aux-menu-label"><i aria-hidden="true" class="services auxicon-list"></i>&nbsp;&nbsp;Leistungen</span>
      <span class="aux-submenu-indicator"></span>
    </a>
    <div class="mega-menu">content</div>
  </li>
</ul>
codeur
  • 120
  • 8
  • As I can see u have put in the mega menu div inside the ul. Can I achive this without having to put the div inside the ul code? The problem is I would have to edit the themes codes then, right? Is there no Javascript to trigger this without having to move the div inside the other element? That would be great! Thanks for your help! – Artan Nov 23 '20 at 20:06
  • Yes, you can trigger a JS event on hover anchor tag or on li. In your theme, do we multiple div tags for each li or a single div tag use for all li? – codeur Nov 24 '20 at 07:20
  • Hi, found out myself. Thanks. The code is easy when you know it. As I´m a beginner it´s harder. But I could find it. Here´s a part of the solution: `` – Artan Nov 24 '20 at 16:55