Montei um arquivo básico com um menu simples. simplifiquei-o ao máximo para tentar encontrar o problema e não consigo.
O problema é que, ao entrar no site, a animação especificada na transition do css começa a funcionar automaticamente, ampliando os botões e alterando suas cores, mas apenas quando importo o arquivo .css Se eu uso a tag para inserir o css, a animação não funciona a menos que o cursor sobreponha o botão.
Abaixo com todo o conteúdo junto, funcionando como eu preciso, apenas com o :hover
<html>
<head>
<style type="text/css">
.escolha{background-color: #999; color: #fff;}
.escolha ul { list-style: none; margin-left: -40px;}
.escolha ul li {background-color: #999; padding: 10px 0; cursor: pointer; transition: all 0.5s ease 0s;}
.escolha ul li estado{width: 50%; padding: 10px; transition: all 0.5s ease 0s;}
.escolha ul li cidade{width: 50%; padding: 10px; transition: all 0.5s ease 0s;}
.escolha ul li:hover {background-color: #6ab4c6; transition: all 0.5s ease 0s;}
.escolha ul li:hover estado{background-color: #0088a4;}
.escolha ul li:hover cidade{padding: 10px 10px 10px 20px;}`
</style>
</head>
<body>
<div class="escolha">
<ul>
<li><estado>SP</estado><cidade>São Paulo</cidade></li>
<li><estado>SP</estado><cidade>São Caetano</cidade></li>
<li><estado>PR</estado><cidade>Curitiba</cidade></li>
</ul>
</div>
</body>
</html>
Abaixo com os arquivos separados, importando o .css, onde a animação acontece
.escolha{background-color: #999; color: #fff;}
.escolha ul { list-style: none; margin-left: -40px;}
.escolha ul li {background-color: #999; padding: 10px 0; cursor: pointer; transition: all 0.5s ease 0s;}
.escolha ul li estado{width: 50%; padding: 10px; transition: all 0.5s ease 0s;}
.escolha ul li cidade{width: 50%; padding: 10px; transition: all 0.5s ease 0s;}
.escolha ul li:hover {background-color: #6ab4c6; transition: all 0.5s ease 0s;}
.escolha ul li:hover estado{background-color: #0088a4;}
.escolha ul li:hover cidade{padding: 10px 10px 10px 20px;}
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/stylepaginas.css" media="screen, handheld" />
</head>
<body>
<div class="escolha">
<ul>
<li><estado>SP</estado><cidade>São Paulo</cidade></li>
<li><estado>SP</estado><cidade>São Caetano</cidade></li>
<li><estado>PR</estado><cidade>Curitiba</cidade></li>
</ul>
</div>
</body>
</html>
Tentei utilizar o jsfiddle para testar mas o erro não acontece, apenas no localhost e na versão online.
Se alguém tiver uma solução, eu agradecerei muito.