Eu criei um menu com HTML5 e CSS3, até ai tudo bem, deixei ele bem no canto superior da tela e tudo certinho, só que quando abro o mesmo arquivo em outra tela o menu não está mais formatado no canto certinho como eu tinha deixado.
Alguém tem alguma dica ou algo que eu estou deixando de fazer?
nav#menu ul {
list-style: none;
text-transform: uppercase;
position: absolute;
top: -15px;
left: 450px
}
nav#menu li {
display: inline-block;
background-color: #dddddd;
padding: 6px;
margin: -1px
}
nav#menu {
display: block;
}
<header id="header1">
<hgroup>
<h1>Milky Way</h1>
<h2>Solar System</h2>
</hgroup>
<img id="icone" src="_images/solarsystems01.png" alt="this images is about solar systems" title="solar system" width="250" height="50" align="right"/>
<nav id="menu">
<ul>
<li onmouseover="mudaFoto('_images/Mercurio.png')" onmouseout="mudaFoto('_images/solarsystems01.png')"><a href="sun.html">Sun</a></li>
<li>Mercury</li>
<li>Venus</li>
<li>Earth</li>
<li>Mars</li>
<li>Jupter</li>
<li>Saturn</li>
<li>Uranus</li>
<li>Neptune</li>
<li>Pluto</li>
</ul>
</nav>
</header>