ナビゲーションバーにCSSをホバーしても動作しません

Question

私はウェブ開発をめちゃくちゃにしています。私はCSSのホバーセクションに問題がありました。

私はナビゲーションが垂直になっていたときにこれを使っていましたが、代わりに問題が始まった場所を水平にすることに決めました。

私はこれをStackOverflowで検索し、Googleにチェックを入れましたが、解決策の中では役に立たないようです。私のコードは少し厄介であれば申し訳ありませんが、私はあなたがHTMLから必要なセクションが表示され、CSS

HTML

<div id="nav"> 
    <ul> 
      <li><a href="Home.html"><b><font size="5">Home</font></b></a></li> 
      <li><a href="About.html"><b><font size="5">About</font></b></a></li> 
      <li><a href="ContactUs.html"><b><font size="5">Contact Us</font></b></a></li> 
    </ul> 
</div> 

CSS

#nav { 
    /*width: 200px;*/ 
} 

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background: linear-gradient(to bottom, white 10%, #2E3E9F 90%); 
} 

li{ 
    float: left; 
} 

li a{ 
    display: block; 
    background-color: white; 
    text-align: center; 
    color: grey; 
    padding: 14px 16px; 
    text-decoration: none; 
    border: 1px solid black; 
} 

li a:hover{ 
    background-color: grey; 
    color: white; 
} 

Answer 1

はにその素晴らしいではありません、これを試してみてくださいただし!importantを使用してください。 （クローム）

#nav { 
 
    /*width: 200px;*/ 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background: linear-gradient(to bottom, white 10%, #2E3E9F 90%); 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
li a { 
 
    display: block; 
 
    background-color: white; 
 
    text-align: center; 
 
    color: grey; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    border: 1px solid black; 
 
} 
 

 
li a:hover { 
 
    background-color: grey !important; 
 
    color: white !important;

<div id="nav"> 
 
    <ul> 
 
    <li><a href="Home.html"><b><font size="5">Home</font></b></a></li> 
 
    <li><a href="About.html"><b><font size="5">About</font></b></a></li> 
 
    <li><a href="ContactUs.html"><b><font size="5">Contact Us</font></b></a></li> 
 
    </ul> 
 
</div>