:Hover does not work

Question

I had already used something similar for a background image, but now for the buttons on my site it is not working anymore.

nav#menu li:hover {
 display: inline-block;
 transition-duration:0.3s;
 **-webkit-transition-duration: 0.3s;**
 **-moz-transition-duration: 0.3s;**
 **-ms-transition-duration: 0.3s;**
 **-o-transition-duration: 0.3s;**
 background-color: #6A6A6A;
 padding: 10px;
 margin: 2px;

(bold snippets are for compatibility with older versions of browsers)

Answer 1

Enter the ul element in the selection of widgets in the CSS:

nav#menu ul li{
display: inline-block;
transition-duration:0.3s;
background-color: #ccc;
padding: 10px;
margin: 2px;
}
nav#menu ul li:hover {
display: inline-block;
transition-duration:0.3s;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-ms-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
background-color: #6A6A6A;
padding: 10px;
margin: 2px;
}

<nav id="menu">
 <ul>
   <li>
   linha 3
   </li>
   <li>
   linha 2
   </li>
 </ul>
</nav>