Query on #h-navbar in Dreamweaver

Question

I have created a horizontal menu bar with 5 items.  The text is white for all of them, but when I hover over them I want the text to change to a different colour for each of the 5 items.  I have got this to work in Safari and Firefox by setting up a separate hover CSS code.  However in Internet Explorer it doesn't work, the text stays white when you hover over it.  I suspect my attempt at the code is not quite right or maybe Internet Explorer just can't cope?  Any help would be appreciated!
My code is:-
#h-navbar a1:hover {
          color: #F701e2;
          background-color: #000;
#h-navbar a2:hover {
          color: #Fb001f;
          background-color: #000;
#h-navbar a3:hover {
          color: #18e7df;
          background-color: #000;
#h-navbar a4:hover {
          color: #fefa01;
          background-color: #000;
          color: #fefa01;
#h-navbar a5:hover {
          color: #7b09e5;
          background-color: #000;
and then:-
<div id="h-navbar"><a href="index.html"><a1><strong><strong><strong><strong>H</strong></strong></strong></stron g>ome</a1></a> | <a href="aboutus.html"><a2><strong><strong><strong><strong>A</strong></strong></strong></str ong>bout <strong><strong><strong><strong>U</strong></strong></strong></strong>s</a2></a> | <a href="experience.html"><a3><strong><strong><strong><strong>E</strong></strong></strong></ strong>xperience</a3></a> | <a href="services.html"><a4><strong><strong><strong><strong>S</strong></strong></strong></st rong>ervices</a4></a> | <a href="contacts.html"><a5><strong><strong><strong><strong>C</strong></strong></strong></st rong>ontacts</a5></a>
</div>  
Thanks.

Answer 1

Thank you.  The site is quantexqatar.com.
So, all the CSS code I have now is as below.  I didn't think I would need the bit in bold now, but if I take it out then the text turns grey and is underlined.  I would have expected it to be white because that's what is in the a1-a5 rules, but clearly I'm misunderstanding something?  Please can you explain it to me?  Thank you for your help.
#h-navbar {
          font-family: Candara, "Myriad Pro", Arial, Helvetica;
          font-size: 19pt;
          color: #FFF;
          background-color: #000;
          padding-left: 20px;
          padding-bottom: 15px;
          width: 765px;
          z-index: 1;
#h-navbar a, #h-navbar a:visited {
          text-decoration: none;
          color: #FFF;
          padding-right: 10px;
          padding-left: 10px;
#h-navbar a1:link, #h-navbar a1:visited {
          text-decoration: none;
          color: #FFF;
          padding-right: 10px;
          padding-left: 10px;
#h-navbar a2:link, #h-navbar a2:visited {
          text-decoration: none;
          color: #FFF;
          padding-right: 10px;
          padding-left: 10px;
#h-navbar a3:link, #h-navbar a3:visited {
          text-decoration: none;
          color: #FFF;
          padding-right: 10px;
          padding-left: 10px;
#h-navbar a4:link, #h-navbar a4:visited {
          text-decoration: none;
          color: #FFF;
          padding-right: 10px;
          padding-left: 10px;
#h-navbar a5:link, #h-navbar a5:visited {
          text-decoration: none;
          color: #FFF;
          padding-right: 10px;
          padding-left: 10px;
#h-navbar a1:hover,#h-navbar a1:active {
          color: #F701e2;
          background-color: #000;
#h-navbar a2:hover,#h-navbar a2:active {
          color: #Fb001f;
          background-color: #000;
#h-navbar a3:hover,#h-navbar a3:active {
          color: #18e7df;
          background-color: #000;
#h-navbar a4:hover,#h-navbar a4:active {
          color: #fefa01;
          background-color: #000;
          color: #fefa01;
#h-navbar a5:hover,#h-navbar a5:active {
          color: #7b09e5;
          background-color: #000;