I am trying to create a sitemap page with links to the rest of the pages in my site. I have 3 problems that I can't resolve;

1. Hover doesn't show when I scroll over links.

Here is the css code.
Code:
#menu-1 a  { color: black;}
#menu-1 a:hover { color:yellow;}
#menu-1 a:active { color:#FF0000; }
I am also having problems with the font size in each link. As you go down the page the fonts increase in size. I use 1.25em for the main link and 1.00 for the sub link.

You can see the problem here

This is the code for the links;
Code:
#menu-1 {list-style: none;
         text-align: center; 
         font-size: 1.50em;
         font-color: black;
}
#menu-1 a  { color: black;}
#menu-1 a:hover { color:yellow;}
#menu-1 a:active { color:#FF0000; }
#sub-menu-1 {list-style: none;
             text-align: centre;       // changed to center,  comment is only here, not in file//
             font-size: 1.00em;
} 
#menu-2 {list-style: none;
         text-align: center; 
         font-size: 1.25em;
         font-color: black;
}
#sub-menu-2 {list-style: none;
             text-align: center;
             font-size: 1.00em;
} 
#menu-3 {list-style: none;
         text-align: center; 
         font-size: 1.25em;
}
If you want to see all the css code for the page it is here

How do i resolve these problems?