WN - Två frågor angående HTML5 & CSS3

Sitter här och "tränar" på att skapa lite hemsidor med hjälp av HTML5 och CSS3, men har tyvärr kört fast en aning.

Problem #1:
Jag vill ha en transition som gör att när man hovrar länken att den sakta men säkert ska ändra färg, vilket den gör nu. Men problemet är att det fungerar inte då man redan har klickat på en länk, då blir det bara en vanlig hovring utan någon övergång.

Kod:

/* Den del av CSS'en som jag tror är intressant */



nav#menu ul li a:link, nav#menu ul li a:visited {

text-decoration: none;

color: #333;

line-height: 50px;

margin-left: 10px;

font-size: 23px;

transition: color 1s ease-in-out;

-webkit-transition: color 1s ease-in-out; 

}



nav#menu ul li a:hover {

color: #999;

}

Problem #2:
Jag fick åäo att fungera på förstasidan jag gjorde. Sedan kopierade jag hela den koden som en mall till nästa undersida jag skulle göra och sparade den som en annat namn innan jag ändrade någonting. Men då helt plötsligt vägrar åäö visas och istället blir det frågetecken och olika tecken. Jag tycker det är väldigt konstigt med tanke på att det är exakt samma kod som på första sidan.

HTML-kod:

<!-- Den del av HTML-koden jag tror ni har nytta av -->



<!DOCTYPE html>

<html lang="en">

<head>

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

        <title>Testar lite</title>

        <meta charset="utf-8">

        

        <link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">

        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">

</head>

Någon som har någon idé om hur man löser något av dessa problem?

Tack på förhand!