JSFiddle - React, Tailwind, and code Playground

by Bruno Augusto

HTML

<ul id="menu1">
    <li><a>Item #1</a></li>
    <li><a>Item #2</a></li>
    <li><a>Item #3</a></li>
</ul>

<ul id="menu2">
    <li><a>Item #1</a></li>
    <li><a>Item #2</a></li>
    <li><a>Item #3</a></li>
</ul>

CSS

#menu1, #menu2 {
    border: 1px solid #000;
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 250px;
}

#menu1 li, #menu2 li {
    padding: 5px;
}

#menu1 li {
    background-color: #FFFF00;
}

#menu1 li a:hover {
    background-color: #FFFF4D;
}

#menu2 li {
    background-color: #FF0000;
}

#menu2 li a:hover {
    background-color: #FF4D4D;
    
    /**
     * Transforma o link em elemento de bloco,
     * assim o width do <li> sejá válido <a>
     */
    
    display: block;
    
    /**
     * Compensamos o padding dado ao <li> para que
     * não exista uma área de 5px em torno do link
     * não preenchida pela nova cor
     */
    margin: -5px;
    
    /**
     * Reaplicamos o padding para que quanto mouse passar
     * o elemento não sofra um efeito sanfona
     * (encolhe/expande - comente essa linha para ver)
     */
    padding: 5px;
}