prevent default occurring on wrong element and mouseleave/mouseout give inconsistent response

Question

I've tried to produce a workable snippet but this is done in wordpress and am currently unable to.

Here's what we are trying to do. We have a menu with 5 items. These are displayed in inline-block. On two of the five items we have a sub menu displayed in block. For those two items we want to disable the click event but still have mouseover work and on mouseover display the sub menu and change the bottom margin of the navbar. The click event needs to work on the sub menu items. On mouseleave we need to change the bottom margin back to 0px.

The structure of the menu is as follows:

<div class="navbar">
   <ul class="main-menu">
      <li><a href="https:\\google.com">Home</a></li>
      <li class="aboutUs">About Us
         <ul class='sub-menu'>
            <li><a href="https:\\yahoo.com">Home</a>Our Story</a></li>
            <li><a href="https:\\yahoo.com">SWAG Leaders</a></li>
            <li><a href="https:\\yahoo.com">In The News</a></li>
          </ul>
</li>
      <li><a href="https:\\google.com">Our Work</a></li>
      <li><a href="https:\\google.com">Calendar</a></li>
      <li class="takeAction">Take Action
         <ul class='sub-menu'>
            <li><a href="https:\\yahoo.com">Home Improvement</a></li>
            <li><a href="https:\\yahoo.com">Get Involved</a></li>
            <li><a href="https:\\yahoo.com">Resources</a></li>
            <li><a href="https:\\yahoo.com">Donate</a></li>
          </ul>
</li>
</div> 

and here is the JS:

function moveDown(event){                    
const submenus = document.getElementsByClassName('sub-menu')                      
//var vision = document.getElementsByClassName('home-vision')[0]   
var vision = document.getElementById("navbar");


var sub     

    if(event.target.innerHTML === "About Us"){
        sub=submenus[0]
    }else{
        sub=submenus[1]
    }

var rect = sub.getBoundingClientRect();         
vision.style.marginBottom = rect.height + "px"      
}


function moveUp(event){ 
//var vision = document.getElementsByClassName('home-vision')[0] 
var vision = document.getElementById("menu-1");
vision.style.marginBottom = 0   
}


(function(){


var aboutUs = document.getElementsByClassName('aboutUs')[0] 
var takeAction = document.getElementsByClassName('takeAction')[0] 

aboutUs.addEventListener("click", function(event){
event.preventDefault()
})

takeAction.addEventListener("click", function(event){
event.preventDefault()
})      

aboutUs.addEventListener('mouseover', function(event) {moveDown(event)},{passive: false})
takeAction.addEventListener('mouseover', function(event) {moveDown(event)},{passive: false})  

aboutUs.addEventListener('mouseleave', function(event) {moveUp(event)},{passive: false})
takeAction.addEventListener('mouseleave', function(event) {moveUp(event)},{passive: false})     
})()

here's a link to the site

Here are the specific issues:

1) the listeners to prevent the default action of click are on the main menu elements "about us" and "take action" but are preventing the action on the sub menu and not the main menu element

2) mouseleave is suppose to work only when you leave the element or inner elements. This seems to be working on "take action" but not on "about us" where it looks like it's working like a mouseout event.

I am trying to provide a working example. It's for a really good cause and your help is greatly appreciated.

UPDATE:

looking at this piece of code:

<li class="aboutUs">About Us
         <ul class='sub-menu'>
            <li><a href="https:\\yahoo.com">Home</a>Our Story</a></li>
            <li><a href="https:\\yahoo.com">SWAG Leaders</a></li>
            <li><a href="https:\\yahoo.com">In The News</a></li>
          </ul>
</li>

We want to disable the click on the words "About Us" (which is not a link) but still have the click enabled on the ul sub menu

Answer 1

In this part of your code

aboutUs.addEventListener("click", function(event){
    event.preventDefault()
})

You could check event.target and verify it's the correct click to prevent like

aboutUs.addEventListener("click", function(event){
    if(event.target.innerText === "About Us") {
         event.preventDefault()
    }
})