Multi level html drop-down from XML
<p>I am new in XML and java script. I want to create nested drop-down that takes text from XML  using java script.so, whenever user  hover on any sub-menu then all options for that particular sub-menu will displayed in another multilevel drop down list.Photo given bellow.Image given below:
<a href="https://i.stack.imgur.com/q8W2p.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/q8W2p.png" alt="enter image description here" /></a></p>
<p>Here is My code:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function createSelect(id, className) {
    return $('&lt;select&gt;').attr("id", id).attr("class", className);
}

function appendDropDown(id, text, value, classAttr) {
    $('&lt;option&gt;').val(value).text(text).appendTo(id);
}

var xml = '&lt;root&gt;&lt;sheet id="1" name="Submenu1"&gt;&lt;row id="1_1"&gt;&lt;col1&gt;CODE&lt;/col1&gt;&lt;col2&gt;Option NAME 1&lt;/col2&gt;&lt;/row&gt;&lt;row id="1_2"&gt;&lt;col1&gt;46.0&lt;/col1&gt;&lt;col2&gt;Option NAME 2&lt;/col2&gt;&lt;/row&gt;&lt;/sheet&gt;&lt;sheet id="2" name="Submenu2"&gt;&lt;row id="2_1"&gt;&lt;col1&gt;CODE&lt;/col1&gt;&lt;col2&gt;Option NAME 1&lt;/col2&gt;&lt;/row&gt;&lt;row id="2_2"&gt;&lt;col1&gt;R2&lt;/col1&gt;&lt;col2&gt;Option NAME 2&lt;/col2&gt;&lt;/row&gt;&lt;/sheet&gt;&lt;sheet id="3"  name="Submenu3"&gt;&lt;row id="3_1"&gt;&lt;col1&gt;CODE&lt;/col1&gt;&lt;col2&gt;Option NAME 1&lt;/col2&gt;&lt;/row&gt;&lt;row id="3_2"&gt;&lt;col1&gt;21.0&lt;/col1&gt;&lt;col2&gt;Option NAME 2&lt;/col2&gt;&lt;/row&gt;&lt;/sheet&gt;&gt;&lt;/root&gt;',
    xmlDoc = $.parseXML(xml),
    $xml = $(xmlDoc);

$xml.find('sheet').each(function() {
    var sheet = $(this);
    var submenuName = $(sheet).attr("name");
    var submenuOptionIdentifier = submenuName + "option";

    //Adding options to Select Tag for Submenus     
    appendDropDown("#subMenuList", submenuName, submenuOptionIdentifier, submenuName);

    //Creating Select Tag for showing options for the submenus
    $("#optionsList").append(createSelect(submenuOptionIdentifier, "hide submenuOptions"));

    //Iterating over each and every row to get the options for the respective submenus     
    $(sheet).find('row').each(function() {
        var option = $(this).find('col2').text();
        var value = $(this).find('col1').text();
        appendDropDown("#" + submenuOptionIdentifier, option, value, submenuOptionIdentifier);
    });
});

//Showing respective options of the submenu on changing any options
$("#subMenuList").change(function() {
    $(".submenuOptions").hide();
    $("#" + $(this).val()).css("display", "block");
}).trigger("change");</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.hide
{
display:none;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

&lt;div id="wrapper"&gt;
&lt;select id="subMenuList"&gt;&lt;/select&gt;
&lt;div id="optionsList"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>
<p>Please let me know for further information. Thanks.</p>