JOSE CORDEIRO NETO

Mandei errado na primeira, acho que vai dar certo agora

HTML

<div id="interface">
<header id="cabecalho">
    <hgroup>
    <h1><br><br>Google Glass</h1>
    <h2>A revolução do Google está chegando</h2>
    </hgroup>
   
    <img id="icone" src="_imagens/glass-oculos-preto-peq.png" alt="imagem">

    <nav id="menu">
        <h1>Menu Principal</h1>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="specs.html">Especificações</a></li>
                <li><a href="fotos.html">Fotos</a></li>
                <li><a href="multimidia.html">Multimídia</a></li>
                <li><a href="fale-conosco.html">Fale conosco</a></li>    
            </ul>
    </nav>

</header>

CSS

nav#menu {
    display: block;    
}
nav#menu ul {    
    list-style: none;
    text-transform: uppercase;
    position: absolute;
    top: -20px;   
}
nav#menu li {
    display: inline-block;
    background-color: rgb(149, 148, 148);
    padding: 6px;
    margin: 2px;
    transition: background-color 0.3s;    
}
nav#menu li:hover {
    background-color:greenyellow;
}
nav#menu h1 {
    display: none;
}
nav#menu a {
    color: black;
    text-decoration: none;
}
nav#menu a:hover {
    color: cornflowerblue;
    text-decoration: underline;
}