JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<section class="intro">
  <div class="inner">
    <div class="content" id="content_image">
      <h1>Welcome</h1>
    </div>
  </div>
</section>
<footer id="footer">
  <nav id="nav">
  </nav>
</footer>

<menus>
    <menu text="Subjects">
        <menu text="English">
            <school text="English A" image="E_A.png" ></school>
            <school text="English B" image="E_B.png" ></school>
        </menu>
        <menu text="Maths">
            <school text="Maths A" image="M_A.jpg" ></school>
            <school text="Maths B" image="M_B.jpg" ></school>
        </menu>
    </menu>
    <menu text="Teachers">
        <school text="Sara" image="phones/sara.jpg"></school>
        <school text="Maya" image="phones/maya.jpg"></school>
    </menu>
</menus>

CSS

/* =========================
    GENERAL START
===========================*/
html, body {
    background-color: #f0efed;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    font-family: 'Oswald', sans-serif;
}
.intro {
    height: 90%;
    width: 100%;
    margin: auto;
    top: 0;
    display: table;
}
.intro .inner {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    max-width: none;
}
.content {
    max-width: 90%;
    margin: 0 auto;
    text-align: center;
    padding: 20px 20px 40px 20px;
}
.content h1 {
    font-family: 'Raleway', sans-serif;
    text-shadow: 0px 0px 300px #000;
    padding-bottom: 10px;
    font-size: 225%;
}
/* =========================
    GENERAL END
===========================*/

/* =========================
    FOOTER START
===========================*/
#footer {
    position: fixed;
    bottom: 0;
    margin: 0;
    padding: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 10%;
    font-family: Arial;
    text-shadow: 1px 1px 1px black;
    border-top: 1px solid #dbdbdb;
    background-color: #ffffff;
    box-shadow: inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25),inset 0 -15px 30px rgba(255,255,255,0.3);
}

/* =========================
    FOOTER END
===========================*/

/* =========================
    NAVIGATION START
===========================*/
nav {
    width: 100%;
    background: #ffffff;
    padding: 0;
    margin: 0;
    height: 60px;
    position:relative;
}
nav ul {
    background: #ffffff;
    list-style:none;
    padding:0 20px;
    margin: 0;
    height: 60px;

}
nav ul li {
    display: inline-block;
}
nav ul li a {
    color:#333333;
    display:block;
    padding:0px 40px;
    text-decoration:none;
    float: left;
    height: 50px;
    line-height: 50px;
}
nav ul li:hover {
    background: #205791;
    border-radius: 20px;
}
nav ul li:hover > a{
    color:#ffffff;
}

/*
nav ul li:hover>ul...

JavaScript

$(document).ready(function() {    
    generateMenu();
    handle();
});

function generateMenu(xml) {
    var emptySubMenu = $("<ul />");
    var mainMenu = $("<ul />");
    
    $('menus').children('menu').each(function() {       
            var li = generateLiNode($(this).attr("text"));
                        
            //get subMenu level 1             
            var subMenuLvl1 = $("<ul />");
            $(this).children().each(function() {
                  var li2 = generateLiNode($(this).attr("text"));
                  
                  //get subMenu level 2  
                  var subMenuLvl2 = $("<ul />");
                  $(this).children().each(function() {
                      subMenuLvl2.append(generateLiNode($(this).attr("text")));                
                  });

                  if (subMenuLvl2.html() != emptySubMenu.html())
                    li2.append(subMenuLvl2);                 
                  //subMenu level 2 is prepared.
                  
                  subMenuLvl1.append(li2);
            });
            
            if (subMenuLvl1.html() != emptySubMenu.html())
            	li.append(subMenuLvl1);
            //subMenu level 1 is prepared.
            
            mainMenu.append(li);        
    });
    
    $("#nav").append(mainMenu);
}

function generateLiNode(text)
{
	return $('<li id="' + text + '"><a href="#">' + text + '</a></li>')
}

function handle(){
    $("nav ul li").on("click", function(e) {
    		e.stopPropagation();
        var parent = $(this).parent("li");
        if (parent.length)
        	$(this).parent().siblings().removeClass("expanded");
        else
        	$(this).siblings().removeClass("expanded");
        $(this).addClass("expanded")
  });
}