Answer a question

I have a naked wordpress theme. The menu nav bar has 6 items/linked text of these 6, 4 have sub categories with dropdowns showing.

However when I go to add a sub category to one of the items that does not already have a dropdown/sub category it does not display on my site.

I have saved and cleared cache.

When I inspect the html code I have noticed a difference between the successful and unsuccessful. See below:

Successful menu item with sub category in dropdown:

<li id="menu-item-7726" class="who has-links menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-7726">
    <a href="/who-we-are/leadership-team/" data-unsp-sanitized="clean">Who We Are</a>
    <ul class="sub-menu">
        <li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30">
            <a href="https://www.website.com/who-we-are/leadership-team/" data-unsp-sanitized="clean">Leadership Team</a>
        </li>
        <li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36">
            <a href="https://www.website.com/who-we-are/ireland/" data-unsp-sanitized="clean">Ireland</a>
        </li>
        <li id="menu-item-37" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-37">
            <a href="https://www.websitee.com/who-we-are/uk/" data-unsp-sanitized="clean">UK</a>
        </li>
    </ul>
</li>

Unsuccessful menu item with sub category not on display:

<li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page current_page_parent current-menu-ancestor current-menu-parent current_page_ancestor menu-item-has-children menu-item-23">
    <a href="https://www.website.com/news-hub/" data-unsp-sanitized="clean">News Hub</a>
    <ul class="sub-menu">
        <li id="menu-item-11549" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-11549">
            <a href="/teampage/" aria-current="page" data-unsp-sanitized="clean">Get Social</a>
        </li>
    </ul>
</li>

When I edit the html in the inspector and change the unsuccessful item to this it works:

<li id="menu-item-23" class="pj has-links menu-item menu-item-type-post_type menu-item-object-page menu-item-object-page menu-item-has-children menu-item-23">
    <a href="https://www.website.com/news-hub/" aria-current="page" data-unsp-sanitized="clean">News Hub</a>
    <ul class="sub-menu">
        <li id="menu-item-11481" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11481">
            <a href="https://www.website.com/teampage/" data-unsp-sanitized="clean">Get Social</a>
        </li>
    </ul>
</li>



<li id="menu-item-23" class="pj has-links menu-item menu-item-type-post_type menu-item-object-page menu-item-object-page menu-item-has-children menu-item-23">
    <a href="https://www.website.com/news-hub/" aria-current="page" data-unsp-sanitized="clean">News Hub</a>
    <ul class="sub-menu">
        <li id="menu-item-11481" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11481">
            <a href="https://www.website.com/teampage/" data-unsp-sanitized="clean">Get Social</a>
        </li>
    </ul>
</li>

My question is how/where do I make this edit permanent? TIA

Edit CSS added:

ul#menu-main li:hover:after {
width:100%;
}
ul#menu-main li.who:after {
left:-50px
}
ul#menu-main li.se:after {
left:-37px;
}
ul#menu-main li.se:hover:after {
width: 186%;   
}
ul#menu-main li.who:hover:after {
width: 160%;
}
#menu-main .pj.has-links .sub-menu {
left:60px;
}
ul#menu-main li a {
color:#fff;
display: inline-block;
}
.single ul#menu-main li a {
font-weight:500;
font-family: 'AvenirLTStd-Medium', sans-serif;
}
ul#menu-main li a:hover {
color:#ffee00;
}
ul#menu-main li.has-links {
position: relative;
}
ul#menu-main li.has-links a:after {
content: '';
background: url(img/chevron-down.svg) no-repeat center center;
width: 16px;
height: 16px;
background-size: 16px 16px;
display: inline-block;
position: relative;
top:2px;
margin-left:10px;
}
ul#menu-main li.has-links:hover a:after {
content: '';
background: url(img/chevron-active.svg) no-repeat center center;
width: 16px;
height: 16px;
background-size: 16px 16px;
display: inline-block;
position: relative;
top:2px;
margin-left:10px;    
}
ul#menu-main li.has-links:hover .sub-menu {
-webkit-transform: scale(1) translateX(-50%);
transform: scale(1) translateX(-50%);
visibility: visible;  
}

Answers

Your issue is that when you add a new child menu-item under an existing parent menu-item that doesn't have already any child menu-item under it, the has-links class is not added to this particular parent menu-item.

This is bizzare because their must be a php function that is generating this class and adding it to each menu-item that is becoming a parent menu-item after putting under it a child menu-item !
If their is no such php function, how did the other parent menu-item get this class ?!

Also, you have a php function, maybe the same one, that is generating a class before the has-links class. It's who for the WHO WE ARE menu-item, it's se for the SERVICES menu-item, it's pj for the PROJECTS menu-item, BUT it's not generating a class for NEWS HUB menu-item when it becomes a parent !
If their is no such php function, how did the other parent menu-item get those classes depending on their names/labels ?!

You say :

I have a naked wordpress theme

Is this a theme that you are developing or a theme that you are using ?
Assuming that it's a theme that you are using, could you tell us which one is it.

Finally, for your menu to work, since I don't have your php code, I'm going to use the native CSS classes added by WordPress for any parent menu-item.
In the above CSS that you provided, replace every has-links by menu-item-has-children. It should work !
Remember to use a child theme for your changes or they will be removed on the next update of the theme that you are using.