JSFiddle - React, Tailwind, and code Playground

by Dimitar Christoff

HTML

<div class="nav square">
    <div>
        <ul>
            <li><a href="#square" class="square_lk">[b] square</a></li>
            <li><a href="#history" class="history_lk">[b] history</a></li>
        </ul>
        <div class="btext">mouse over me</div>
    
    </div>
    
</div>
<div class="nav square">
    <div>
        <ul>
            <li><a href="#square" class="square_lk">[b] square</a></li>
            <li><a href="#history" class="history_lk">[b] history</a></li>
        </ul>
        <div class="btext">mouse over me</div>
    
    </div>
    
</div>

CSS

.nav ul { 
    position: absolute; 
    margin-top: -24px; width: 100px; font-size: 10px !important; background-color: rgb(159,55,32); 
    display: none;
}

div.nav {
    margin-top: 200px;
    background: red;
    width: 200px;
    min-height: 40px;
    border-right: 1px solid #500;
    float: left;
}

div.btext {
    font-family: arial;
    text-align: center;
    color: white;
    padding-top: 10px;
}

JavaScript

document.getElements("div.nav").each(function(el){
    el.addEvents({
        mouseenter: function(){
            this.getElement('ul').setStyle('display', 'block');
            // console.log("hi");
        },
        mouseleave: function(){
            this.getElement('ul').setStyle('display', 'none');
        }
    });
});