JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">
  <ul class="nav">
     <li><a href="#colecao"></a></li>
     <li><a href="#onde"></a></li>
  </ul>
 </div>

CSS

#menu {
	width: 500px;
	height: 165px;
	float: left;
}
ul.nav {
	margin: 0;
	padding: 0;
}
ul.nav li {
	list-style: none;
	display: inline-block;
}
ul.nav li a {
    display:block;
	width: 100px;
    height:50px;
}

/* link 1 */
ul.nav li:nth-of-type(1) a {
    background:url('http://www.wpclipart.com/blanks/buttons/glossy_buttons/glossy_button_blank_red_rectangle.png');
}
ul.nav li:nth-of-type(1):hover a {
    background:url('http://www.wpclipart.com/blanks/buttons/glossy_buttons/glossy_button_blank_blue_rectangle_T.png');
}


/* link 2 */
ul.nav li:nth-of-type(2) a {
    background:url('http://www.wpclipart.com/blanks/buttons/glossy_buttons/glossy_button_blank_green_rectangle.png');
}
ul.nav li:nth-of-type(2):hover a {
    background:url('http://www.wpclipart.com/blanks/buttons/glossy_buttons/glossy_button_blank_red_rectangle.png');
}