Horizontal CSS menu - css

Question

I'm a web designer enthusiast and I've been facing some coding problems in a project I'm currently working on. My goal here is to reproduce the menu styling from this web page: http://blueowlcreative.com/wp/aqua/. I want it to be full-width and centered. This is what I've done so far:
This is the html:
<!-- Menu -->
<div id="menu">
<ul id="menu-bar">
<li>Home</li>
<li>Empresa
<ul>
<li>Nossa história</li>
<li>Sustentabilidade</li>
<li>Compromisso social</li>
</ul>
</li>
<li>Produtos</li>
<li>Cotação</li>
<li>Qualidade
<ul>
<li>Política da qualidade</li>
<li>Certificados</li>
</ul>
</li>
<li>Parceiros
<ul>
<li>Clientes</li>
<li>Fornecedores</li>
</ul>
</li>
<li>Contato</li>
</div><!-- end menu -->
And this is the CSS:
#menu {
width: 100%;
margin: 0;
padding: 0;
height: 60px;
line-height: 100%;
background: #494949;
background: linear-gradient(top, #494949, #353535);
background: -ms-linear-gradient(top, #494949, #353535);
background: -webkit-gradient(linear, left top, left bottom, from(#494949), to(#353535));
background: -moz-linear-gradient(top, #494949, #353535);
border: solid 0px #6d6d6d;
position:relative;
z-index:999; }
#menu-bar {
width: 937px;
margin: 0 auto;
height: 60px;
line-height: 100%; }
#menu-bar li {
margin: 0;
padding: 0;
float: left;
position: relative;
list-style: none; }
#menu-bar a {
margin: 0;
padding: 0px 20px 0px 20px;
font-family: Open Sans;
font-weight: normal;
font-size: 14px;
color: #fff;
text-decoration: none;
display: block;
line-height: 60px;
text-shadow: 1px 1px 0px #000000; }
#menu-bar li ul li a {
margin: 0;
line-height: 20px; }
#menu-bar li:hover > a {
background: #555757;
color: #fff;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear; }
#menu-bar ul a:hover {
background: #0399d4;
color: #fff;
text-shadow: 1px 1px 0px #000; }
#menu-bar ul {
display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 60px;
left: 0;
background: #4f5152;
background-image: -moz-linear-gradient(#58595a,#414344);
background-image: -o-linear-gradient(#58595a,#414344);
background-image: -webkit-linear-gradient(#58595a,#414344);
background-image: linear-gradient(#58595a,#414344);
border: 1px solid #212223;
border-top: 1px solid #212223;
-moz-border-radius: 0px 0px 4px 4px;
-webkit-border-radius: 0px 0px 4px 4px;
-khtml-border-radius: 0px 0px 4px 4px;
border-radius: 0 0 4px 4px;
box-shadow: inset 0 3px 0 #45494b; }
#menu-bar li:hover > ul {
display: block; }
#menu-bar ul li {
float: none;
margin: 0;
padding: 0; }
#menu-bar ul a {
padding: 15px 0px 15px 15px;
color:#fff;
text-shadow: 1px 1px 0px #000000; }
#menu-bar ul li:last-child > a {
border-bottom-left-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius-bottomleft: 4px;
border-bottom-right-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-moz-border-radius-bottomright: 4px; }
#menu-bar:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0; }
#menu-bar {
display: inline-block; }
html[xmlns] #menu-bar {
display: block; }
* html #menu-bar {
height: 1%; }

Answer 1

first you should close your </ul> tag.
and then you should add some styles in your #menu.
top: 0;
left: 0;
change your position:relative; to position:fixed;
#menu {
width: 100%;
margin: 0;
padding: 0;
top: 0;
left: 0;
height: 60px;
line-height: 100%;
background: #494949;
background: linear-gradient(top, #494949, #353535);
background: -ms-linear-gradient(top, #494949, #353535);
background: -webkit-gradient(linear, left top, left bottom, from(#494949), to(#353535));
background: -moz-linear-gradient(top, #494949, #353535);
border: solid 0px #6d6d6d;
position:fixed;
z-index:999;
}
add float: right; in your #menu-bar
#menu-bar {
width: 937px;
margin: 0 auto;
height: 60px;
line-height: 100%;
float: right;
}