JSFiddle - React, Tailwind, and code Playground

HTML

<div id="Menu">
      <ul>
        <li><a href="#">Cat</a></li>
        <li><a href="#">Dog</a></li>
        <li><a href="#">Mouse</a></li>
      </ul>
   </div>

CSS

#Menu {
    height: 40px;
    background-color: rgb(255,165,0);

}
#Menu ul{
    margin:auto;
    padding:0;
}

#Menu li {
    list-style-type: none;
    float: left;
    display: block;
    width:20%;
    height:40px;
    text-align: center;
    line-height:40px;
    font-family: inherit;
    font-size:16px;
}

#Menu li a{
    text-decoration: none;
    color:white;
    position: fixed;

}

#Menu li:hover {
    background-color: #FFB733;
    background: red;
    transition-property: background;
    transition-duration: 1s;
    transition-timing-function: linear;
}


#Menu li a:hover, #Menu li:hover a  {
    color: white;
}