The reason is you just add text in case of high level menu item as dropdown. You would need to pass on the url of main menu while making the sub menu build. During this, add the url to main menu too.
I have modified a little to show that, please make sure the other calls to methods are not broken:
function createNavigation(navData) {
var topNav = document.getElementById("myTopnav");
for (var x = 0; x < navData.length; x++) {
if (navData[x].dropDown === "no") {
var aLink = _createEl("a");
var aTextNode = document.createTextNode(navData[x].URLNAME);
aLink.href = navData[x].URL;
aLink.appendChild(aTextNode);
topNav.appendChild(aLink);
} else if (navData[x].dropDown === "yes") {
var buildSubNavigation;
buildSubNavigation = buildSubNavBar(navData[x].id, navData[x].URLNAME);
var aLink = _createEl("a");
var aTextNode = document.createTextNode(navData[x].URLNAME);
topNav.appendChild(buildSubNavigation);
} else {
var buildSubNavigation;
buildDirectorateNav = buildDirectorateMegaMenu(navData[x].id);
}
}
}
function buildDirectorateMegaMenu(navDataID) {
var buildNav;
var topNav = document.getElementById("myTopnav");
buildNav = buildSubNavBar(navDataID, "", "training");
topNav.appendChild(buildNav);
}
function buildSubNavBar(subNavID, subNavURL, isDirectorate) {
var ddDiv = _createEl("div");
if(isDirectorate === "training"){
ddDiv.classList.add("Mdropdown");
}else{
ddDiv.classList.add("dropdown");
}
var btn = _createEl("button");
if(isDirectorate === "training"){
btn.classList.add("Mdropbtn");
}else{
btn.classList.add("dropbtn");
}
var btnText = document.createTextNode(subNavID);
var aLink = _createEl("a");
var btnText = document.createTextNode(subNavID);
aLink.href = subNavURL;
aLink.appendChild(btnText);
btn.appendChild(aLink);
...
Marked changes made with comment: CHANGE HERE