: hover does not work

0

I had used something similar for a background of an 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;

(excerpts in bold serve for compatibility with older versions of browsers)

    
asked by anonymous 24.02.2018 / 18:06

1 answer

1

Inform the 'ul' element when selecting elements in 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>
    
24.02.2018 / 18:25