Pessoal, boa tarde!
Estou tentando implementar o header da página de produtos na página index.html. Porem, os itens não estão seguindo o alinhamento inline, poderiam me auxiliar?
O a:hover, entre outras coisas está funcionando corretamente, apenas a disposição em linha está com erro.
<div class="caixa">
<h1><img src="imagens/logo.png" alt="Logo da Barbearia Alura"></h1>
<nav class="menu">
<ul >
<li><a href="index.html">Home</a></li>
<li><a href="produtos.html">Produtos</a></li>
<li><a href="contato.html">Contato</a></li>
</ul>
</nav>
</div>
</header>
header {
background: #BBBBBB;
padding: 20px 0;
}
.caixa {
position: relative;
width: 940px;
margin: 0 auto;
}
.menu {
position: absolute;
top: 110px;
right: 0;
}
.menu ul {
display: inline-block;
padding:0px;
margin:0px;
list-style: none;
}
.menu ul li {
display: inline;
margin: 0 0 0 15px;
}
.menu a {
text-transform: uppercase;
color: #000000;
font-weight: bold;
font-size: 22px;
text-decoration: none;
cursor: pointer;
}
.menu a:hover {
color: #c78c19;
text-decoration: underline;
}