JSFiddle - React, Tailwind, and code Playground
HTML
<header>
<ul id="oneLevelNav" class="levelOne">
<li id="tel"><a href="#">Телефоны</a>
<ul id="twoLevelNav_tel" class="levelTwo">
<li id="tel_sam"><a href="#">Samsung</a>
<ul id="threeLevelNav_tel_sam" class="levelThree">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
</ul>
</li>
<li id="tel_app"><a href="#">Apple</a>
<ul id="threeLevelNav_tel_app" class="levelThree">
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
</ul>
</li>
<li id="tel_htc"><a href="#">HTC</a>
<ul id="threeLevelNav_tel_htc" class="levelThree">
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
</ul>
</li>
<li id="tel_nok"><a href="#">Nokia</a>
<ul id="threeLevelNav_tel_nok" class="levelThree">
<li><a href="#">11</a></li>
<li><a href="#">12</a></li>
</ul>
</li>
</ul>
</li>
<li id="pad"><a href="#">Планшеты</a>
<ul id="twoLevelNav_pad" class="levelTwo">
<li id="pad_sam"><a href="#">Samsung</a>
<ul id="threeLevelNav_pad_sam" class="levelThree">
<li><a href="#">14</a></li>
...
CSS
header,nav,section,article,aside,footer {display:block;}
JavaScript
document.createElement('header');
document.createElement('nav');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
$(function(){
$("#oneLevelNav li > ul").hide();
$("#oneLevelNav li").click(function(){
id = $(this).attr("id");
$(this).parent().find("li ul").hide();
$("#"+id+" > ul").show();
});
$("#oneLevelNav li ul li").click(function(){
idThis = $(this).attr("id");
$(this).parent().find("li ul").hide();
$("#"+idThis+" ul").show();
});
});