WP Menu Rollover Nav Merchandise and Impact DIV Elsewhere

I’ve a WP Navigation with three navigation gadgets. I need to rollover a navigation merchandise (the primary of the three) with the ID #mega-menu-item-5128 and alter the show of a div ID #ForParents_BlueBar to "block" (will probably be hidden with show:none;). I’ve tried CSS to no avail. All parts are housed between the < header >< /header > tags.

#mega-menu-item-5128 is an < li > housed within the < nav > component.

#ForParents_BlueBar is a < div > instantly after the < nav > component and surrounding < div > parts. Beneath is a simplified, however correct illustration.

I additionally included a #Good day check navigation merchandise that DOES work. Which is why I’m so baffled.

<div>
  <div>
    <nav>
      <ul> 
        <li id="mega-menu-item-5128"><a category="mega-menu-link" href="#" tabindex="0">For Mother and father</a></li>
      </ul>
    </nav>
  </div>
</div>
<div class="TestHello" id="Hello"><a href="#">Good day</a> </div>
<div class="Submenu_Container">
  <div id="ForParents_BlueBar">
    [Max Mega Menu Plugin Code]
  </div>
</div>

For testing functions, I simply made the padding large and apply a border so I can simply see if I’m hooked accurately, I’ve this CSS:

#mega-menu-item-5128:hover ~ #ForParents_BlueBar {
  /*show:none!necessary;*/
  border: 2px strong pink !necessary;
  padding: 40px !necessary;
}

It doesn’t work.

I’ve additionally tried jQuery (added by way of capabilities.php).

perform addCustomScript(){
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(doc).prepared(perform () {
  $('#mega-menu-item-5128').hover(perform() {
      $('#ForParents_BlueBar').attr('fashion', 'padding: 100px !necessary');
  }, perform() {
      $('#ForParents_BlueBar').attr('fashion', 'padding: 0px !necessary');
  });
});
    $(doc).prepared(perform () {
  $('#Good day').hover(perform() {
      $('#ForParents_BlueBar').attr('fashion', 'padding: 100px !necessary');
  }, perform() {
      $('#ForParents_BlueBar').attr('fashion', 'padding: 0px !necessary');
  });
});
</script>
<?php
}
add_action('wp_head', 'addCustomScript');

This does nothing for the nav, however the check #Good day works.

I’ve been attempting all the things I can consider, and all the things I can discover on the web, however nothing is working.

Any assist could be actually appreciated.