Bom galera, programo faz um tempo em Java e C#. Daí agora tô tentando melhorar mais a parte de Front-End, e apesar de já ter lido bastante coisa, na hora de fazer é um pouco mais complicado. Então, resolvi fazer um site com algumas páginas, somente pra estudo, utilizando apenas HTML5 e CSS3, e é claro, mais pra frente pretendo usar algo de Javascript e Jquery, caso seja necessário.
Enfim, utilizar HTML e CSS pra fazer isso é bem mais complicado do que usar um bootstrap da vida, mas eu realmente quero aprender a mexer e não ficar tão dependendo de frameworks. O grande problema é na hora do menu horizontal, segue código abaixo: HTML do menu
<nav id="menu-principal-container">
<h1><a href="index.html">Manual Front-End</a></h1>
<ul id="menu-principal">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JAVASCRIPT</a></li>
<li><a href="#">TUTORIAIS</a></li>
</ul>
</nav>
CSS do menu
*{ margin: 0; padding: 0; font-family: Arial, Sans-Serif; }
body{ background-color: #ddd; }
header{ width: 100%; height: 50px; background-color: #000; }
menu-principal-container{ margin: 0px 50px; text-align: center; position: relative; }
menu-principal-container h1{ padding: 10px 0px; background-color: transparent; width: 250px; text-align:center; }
menu-principal-container h1 a{ color: #fff; text-decoration: none; }
menu-principal{ position: absolute; float: right; width: auto; display: block; }
menu-principal li{ display: inline-block; margin-top: 15px; }
menu-principal li a{ color: #fff; text-decoration: none; list-style: none; padding: 15px 50px; }
menu-principal li:hover a{ background-color: #fff; color: #ff0000; border-bottom: 3px solid #ff0000; }
o grande problema é que por conta desse título aí, todos os itens da lista de menu descem, mesmo eu colocando o width do h1 somente de 250px.
Alguém tem alguma dica? Não sou muito experiente nessa parte de de front-end.