JSFiddle - React, Tailwind, and code Playground

by Dmitry Nazarov

HTML

<div id="menu">
    <a href="aboutus.htm" class="button"><span>О нас</span></a>
    <a href="vakans.htm" class="button"><span>Вакансии</span></a>
 
<div id="menu2" onmouseout="b();this.className='men3'" onmouseover="a();this.className='men2'">
    
        <a href="#" class="button"><span>Документы</span></a>
            <h3>
            <div class="menu3" style="margin-left:30px" > <a href="docs.htm" class="button1" ><span>Открытие фирмы в Польше</span></a>
                <div class="menu3">  <a href="docs.htm" class="button1" style="margin-left:-5px"><span>Оформление шенген виз</span></a>
                    <div class="menu3">  <a href="docs.htm" class="button1" style="margin-left:-5px"><span>Трудоустройство в Польше</span></a>
                         <div class="menu3">  <a href="docs.htm" class="button1" style="margin-left:-5px"><span>Юридическая поддержка в Польше</span></a>
                         </div>
                    </div>
                </div>
            </div>
            </h3>
    
    </div>
</div>

CSS

#menu2 {
  position:relative;
  float:left;

}

.men2 {
  height: 100px;
}

.men3 {

}

.menu3 {
  display: block;
  position:absolute;
  top:55px;
  z-index: 0;
  margin-right:5px;
  text-align:center;
}

h3 {
  padding:0 0 0 0;
  font: 14pt normal;

}

JavaScript

function b() {
         var str1;
         str1='none';
        
         document.getElementsByTagName('h3')[0].style.display=str1;
     }
     function a() {
         var str;
                    
             str = 'block';
         document.getElementsByTagName('h3')[0].style.display = str;
     }