JSFiddle - React, Tailwind, and code Playground

by felipepalazzo

HTML

<ul id="genre-products">
                <li><span id="female" class="out-st">Feminino</span>
                    <ul id="products-list">
                        <li><a href="#">Especial</a></li>
                        <li><a href="#">Roupas</a></li>
                        <li><a href="#">Cal&ccedil;ados</a></li>
                        <li><a href="#">Acess&oacute;rios</a></li>
                    </ul>
                </li>
                <div class="grey-line"></div>
                <li><span id="male" class="out-st">Masculino</span>
                    <ul id="products-list">
                        <li><a href="#">Sapato</a></li>
                        <li><a href="#">Roupas</a></li>
                        <li><a href="#">Cal&ccedil;ados</a></li>
                        <li><a href="#">Acess&oacute;rios</a></li>
                    </ul>
                </li>
</ul>


<div id="box"></div>

CSS

#genre-products{
border: solid 1px blue;
    width: 100px;
}
#box{
width: 50px;
    height: 50px;
    background: red;
    margin: 10px 0;
}

JavaScript

$('#genre-products').children("li").hover(function(){
    
    $(this).find("ul").css('text-decoration','none');
    });