im trying to make a simple menu, with 5 lines horizontally aligned, using CSS.
This is my base code: http://jsfiddle.net/LVCkp/
HTML
<div class="container clearfix">
<!-- Conteúdo -->
<div id="menu">
<!-- Menu da página -->
<div class="nav">
<ul>
<li><a href="#main">Principal</a>
</li>
<li><a href="#corte">Cortes</a>
</li>
<li><a href="#equipa">Equipa</a>
</li>
<li><a href="#sobre">Sobre Nós</a>
</li>
<li><a href="#contacto">Contatos</a>
</li>
</ul>
</div>
<!-- Fim class nav -->
</div>
<!-- Fim ID menu -->
CSS
body{
width: 100%;
display: block;
margin: 0 auto;
}
body {
width: 100%;
display: block;
margin: 0 auto;
}
.container {
width: 1024px;
}
a {
text-decoration: none;
}
#menu{
background-color: #000000;
position: fixed;
width: 100%;
height: 100px;
line-height: 5px;
font-weight: bold;
font-size: 12px;
}
#menu ul{
margin-top: 50px;
}
#menu li {
text-decoration: none;
list-style: none;
padding: 5px 10px 50px 10px;
display: inline;
}
#menu li a:hover {
background-color: green;
padding: 50px 15px 5px 15px;
color: black;
}
#menu a {
color: white;
text-transform: uppercase;
}
Problems: I can't center the menu links and I can't get them on the middle (horizontal align) of the black bar.
Can someone help?
EDIT: I manage to make it better but the problem is: I cant separate the menu links, so they dont move when we have mouse over
http://jsfiddle.net/LVCkp/3/ I used fixed margins to achieve the position.
#menu ul{
line-height: 5px;
font-weight: bold;
font-size: 12px;
margin-top: 70px;
margin-left: 70px;
}