Change the color of menu items when hovering the mouse

Question

I want to change the writing color of menu items. The way I did the color changes when I pass the arrow over the letter, but I wanted q the letter color of the menu to change soon when I hover the mouse over the background-color.

/* Formataçao do menu */

nav#menu {
  display: block;
}

nav#menu h1 {
  display: none;
}

nav#menu ul {
  list-style: none;
  text-transform: uppercase;
  position: absolute;
  top: -20;
  left: 300px;
}

nav#menu li {
  display: inline-block;
  background: #dddddd;
  padding: 10px;
  margin: 2px;
  transition: background-color 1s;
}

nav#menu  li:hover {
  background-color: #606060;
}

nav#menu a {
  color: black;
  text-decoration: none;
}

nav#menu a:hover {
  color: white;
  text-decoration: underline;
}

<nav id="menu">
	<ul>
		<li><a href="index.html">Home</a></li>
 		<li><a href="specs.html">Especificações</a></li>
 		<li><a href="fotos.html">Fotos</a></li>
 		<li><a href="multimidia.html">Multimídia</a></li>
 		<li><a href="fale-conosco.html">Fale conosco</a></li>
	</ul>
	</nav>

Answer 1

My opinion the best way is to style the A tag and not the LI tag, so Oce gets the effect he needs in a simple way.

/* Formataçao do menu */

nav#menu {
  display: block;
}

nav#menu h1 {
  display: none;
}

nav#menu ul {
  list-style: none;
  text-transform: uppercase;
  position: absolute;
  top: -20;
  left: 300px;
}

nav#menu li {
  display: inline-block;
}

nav#menu a {
  color: black;
  text-decoration: none;
  
  /*trecho que estava no nav#menu li*/
  background: #dddddd;
  padding: 10px;
  margin: 2px;
  transition: background-color 1s;
}

nav#menu a:hover {
  color: white;
  background-color: #606060;
  text-decoration: underline;
}

<nav id="menu">
	<ul>
		<li><a href="index.html">Home</a></li>
 		<li><a href="specs.html">Especificações</a></li>
 		<li><a href="fotos.html">Fotos</a></li>
 		<li><a href="multimidia.html">Multimídia</a></li>
 		<li><a href="fale-conosco.html">Fale conosco</a></li>
	</ul>
	</nav>

Answer 2

Just change the last selector nav#menu a:hover for nav#menu li:hover a. This will point to the tag a that is inside the li. And change the properties of li and of a so that the link occupies the full dimension of the li, making the li fully clickable.

That is, the padding: 10px comes out of li and goes to a. And the properties display: inline-block, and top, right, bottom and left worthwhile 0 will cause the a occupy the entire area of li:

/* Formataçao do menu */

nav#menu {
  display: block;
}

nav#menu h1 {
  display: none;
}

nav#menu ul {
  list-style: none;
  text-transform: uppercase;
  position: absolute;
  top: -20;
  left: 300px;
}

nav#menu li {
  display: inline-block;
  background: #dddddd;
  margin: 2px;
  transition: background-color 1s;
}

nav#menu  li:hover {
  background-color: #606060;
}

nav#menu a {
  color: black;
  text-decoration: none;
  display: inline-block;
  padding: 10px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

nav#menu li:hover a {
  color: white;
  text-decoration: underline;
}

<nav id="menu">
	<ul>
		<li><a href="index.html">Home</a></li>
 		<li><a href="specs.html">Especificações</a></li>
 		<li><a href="fotos.html">Fotos</a></li>
 		<li><a href="multimidia.html">Multimídia</a></li>
 		<li><a href="fale-conosco.html">Fale conosco</a></li>
	</ul>
	</nav>