No Masterpage/CSS Access. Need to programatically set up drop down menu on TOP Nav bar for Team Site w/o Publishing

Question

First off, my limitations. I do not have access to the master page(s) or global css (either using SPD or not...). Nor do I have the ability to use managed or global navigation. This is a Team Site and Publishing Features are locked down so I cannot turn them on. So the site in question only has access to "Top Nav Links" which does not allow drag and drop on the site, or layered drop downs in the site settings. I also do not have access to this particular site collection with PowerShell, so those methods are out.

That being said, I am looking for a way to set up a drop down menu. Methods should be JavaScript/jQuery and CSS and most likely using a SP List to determine what links will be used for the top nav and drop downs. (CSOM and REST methods would also work as long as instructions are clear in snippets)

While annoying, the limitations are prohibitive and as such I realize that I will need to apply the js via a SEWP or via file on a CEWP per page I want this nav bar to visible on.

I have spent quite a lot of time looking this up, but it seems everything is forcing the use of master pages/css or just styles currently existing drop downs.

Anyone have any ideas on how to do this? Code snippets greatly appreciated so I do not need to try and develop this from scratch.

Thanks!

EDIT I have come up with a partial solution, but need some help in getting the drop down portion working:

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" language="javascript">
function loadBlogs() {
    var ul1 = document.getElementById("zz14_RootAspMenu");
    var li1 = document.createElement("li");
    li1.appendChild(document.createTextNode("Blogs"));
    li1.setAttribute("id", "TNBlogsDD");
    li1.setAttribute("class", "static");
    ul1.appendChild(li1);
    var li2 = document.getElementById("TNBlogsDD");
    var ul2 = document.createElement("ul");
    var br = document.createElement("br");
    ul2.setAttribute("id", "dropList");
    li2.appendChild(br);
    li2.appendChild(ul2);       
    var li3 = document.createElement("li");
        li3.setAttribute("id", "dlItem1");
        var a1 = document.createElement("a");
            a1.appendChild(document.createTextNode("Google")); //Name of Link Location
            a1.setAttribute("href", "http://www.google.com"); //For URL of link
            li3.appendChild(a1);
        ul2.appendChild(li3);
        document.getElementById("ul2").style.display = "none";

    li1.addEventListener("onmouseover", dropListOn);
    li1.addEventListener("onmouseout", dropListOff);
};
function dropListOn () {
    document.getElementById("dropList").style.display = "block";
};
function dropListOff () {
    document.getElementById("dropList").style.display = "none";
};
$(document).ready(loadBlogs);
</script>

Any assistance in editing this so Google does not appear initially and works onmouseover and disappears onmouseout would be appreciated

Answer 1

So took a while, and it may not be as clean as it could be... but here it is, the working answer to the problem:

<script src=".../jquery-3.3.1.min.js"></script>
<script type="text/javascript" language="javascript">

function loadBlogs() {
var imInIt = 0;

    var ul1 = document.getElementById("zz14_RootAspMenu");
    var li1 = document.createElement("li");

    li1.appendChild(document.createTextNode("Blogs"));
        li1.setAttribute("id", "TNBlogsDD");
        li1.setAttribute("class", "static");
        li1.setAttribute("onmouseenter", "dropListOnPrime()");
        li1.setAttribute("onmouseleave", "dropListOffPrime()");
     ul1.appendChild(li1);

    var li2 = document.getElementById("TNBlogsDD");
    var div1 = document.createElement("div");
        div1.setAttribute("id", "dropListDiv");
        div1.setAttribute("style", "position:absolute; margin-left: -10px; margin-top:10px; padding:7px; z-index:500; display:none; border: solid 1px silver;");
        div1.setAttribute("onmouseenter", "dropListOn()");
        div1.setAttribute("onmouseleave", "dropListOff()");
     li1.appendChild(div1);

    var divThis = document.getElementById("dropListDiv");
    var ul2 = document.createElement("ul");
        ul2.setAttribute("id", "dropList");
        divThis.appendChild(ul2);

    var li3 = document.createElement("li");
        li3.setAttribute("id", "dlItem1");
        li3.setAttribute("style", "display:block;");
        var a1 = document.createElement("a");
            a1.appendChild(document.createTextNode("Blog 1"));              
            a1.setAttribute("href", ".../blog/default.aspx");
         li3.appendChild(a1);
     ul2.appendChild(li3);

    var li4 = document.createElement("li");
        li4.setAttribute("id", "dlItem2");
        li4.setAttribute("style", "display:block;");
        var a2 = document.createElement("a");
            a2.appendChild(document.createTextNode("Blog 2"));
            a2.setAttribute("href", ".../Blog/default.aspx");
         li4.appendChild(a2);
     ul2.appendChild(li4);

    var li5 = document.createElement("li");
        li5.setAttribute("id", "dlItem3");
        li5.setAttribute("style", "display:block;");
        var a3 = document.createElement("a");
            a3.appendChild(document.createTextNode("Blog 3"));
            a3.setAttribute("href", ".../Blog/default.aspx");
         li5.appendChild(a3);
     ul2.appendChild(li5);
};

function dropListOnPrime () {
    document.getElementById("dropListDiv").style.display = "block";
    imInIt = 0;
};

function dropListOffPrime () {
        setTimeout(function(){
            if (imInIt!=1){
                document.getElementById("dropListDiv").style.display = "none";
            };
        },1500);
};

function dropListOn () {
    imInIt = 1;
};

function dropListOff () {
    imInIt = 0;
    setTimeout(function(){document.getElementById("dropListDiv").style.display = "none";},10);
};

$(document).ready(loadBlogs);

Thanks to everyone for looking.

Answer 2

If I'm understanding this correctly what you wish to achieve is to have a drop down menu off a header in the top bar navigation? If so this can be achieved using site settings>Look and Feel>Navigation

From here you can click global navigation> Add header> Add link. This will add all the links as a drop down when hovering above the header. Sorry if I've misunderstood it's a bit late in the day and my mind is cooked.