悬停HTML5的导航链接将不起作用

Question

因此，我已阅读了与导航栏问题相关的主题，但他们都没有帮助我。

我有一个HTML5导航栏，我希望它有一个悬停颜色。我想我做了正确的代码，但是当我将鼠标悬停我什么都没有......

HTML：

<nav id="mainnav"> 
     <ul> 
     <li><a href="index.html" class="thispage">home</a></li> 
     <li><a href="#">about</a></li> 
     <li><a href="#">portfolio </a></li> 
     <li><a href="#">blog </a></li> 
     <li><a href="#">contact</a></li> 
     </ul> 
     </nav> 
     </header> 

而CSS：

#mainnav a { 
width: 20%; 
display: block; 
float: left; 
background-color: #292929; 
text-align: center; 
color: #FFFFFF; 
text-transform: uppercase; 
padding-top: 6px; 
padding-bottom: 6px; 
} 

#mainnav a:visited, #mainnav a:hover, #mainnav a:active, #mainnav a:focus, #mainnav a.thispage { 
    text-decoration: none; 
    background-color: #41746D; 

} 

难道我失去了一些东西真的明显？

Answer 1

它适合我。

#mainnav a { 
 
width: 20%; 
 
display: block; 
 
float: left; 
 
background-color: #292929; 
 
text-align: center; 
 
color: #FFFFFF; 
 
text-transform: uppercase; 
 
padding-top: 6px; 
 
padding-bottom: 6px; 
 
} 
 

 
#mainnav a:visited, #mainnav a:hover, #mainnav a:active, #mainnav a:focus{ 
 
    text-decoration: none; 
 
    background-color: #41746D; 
 

 
}

<header> 
 
<nav id="mainnav"> 
 
     <ul> 
 
     <li><a href="index.html" class="thispage">home</a></li> 
 
     <li><a href="#">about</a></li> 
 
     <li><a href="#">portfolio </a></li> 
 
     <li><a href="#">blog </a></li> 
 
     <li><a href="#">contact</a></li> 
 
     </ul> 
 
     </nav> 
 
     </header>