Olá pessoal, estou tentando centralizar esse menu mas não consigo, já testei várias dicas na net mas não funciona, alguém poderia me ajudar?
HTML
<div id='menu'>
<div class='menu1'>
<ul class='menu' id='menu-main'>
<li class='active'><a href='/'>Home</a></li>
<li><a href='#'>Video</a></li>
<li><a href='#'>Music</a>
<ul>
<li><a class='trigger' href='#'>Sub Menu 1</a></li>
<li><a class='trigger' href='#'>Sub Menu 2</a></li>
<li><a class='trigger' href='#'>Sub Menu 3</a></li>
</ul>
</li>
<li><a href='#'>Movie</a></li>
<li><a href='#'>Games</a></li>
</ul>
</div>
</div>
CSS
#menu{width: 100%;
height: 55px;}
.menu1{width:1200px;
height: 55px; margin: 0 auto;}
.menu{float:left; width:75%}
.menu li{position:relative;list-style:none;float:left;display:block;height:45px}
.menu li a{ padding: 14px 28px 14px 10px;
text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
font-size: 20px;
line-height: 30px;
font-family: 'Fjalla One', sans-serif;
color: #ffffff;
height: 30px;
text-transform: uppercase;
display: block;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;}
.menu li:first-child a{padding:14px 22px 8px 10px}
.menu li:hover > a{color:#D04721}
.menu ul{position: absolute;
top: 55px;
left: 0;
opacity: 0;
background: #131313;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;}
.menu li:hover > ul{opacity:1}
.menu ul li{height:0;overflow:hidden;-webkit-transition:height .25s ease .1s;-moz-transition:height .25s ease .1s;-o-transition:height .25s ease .1s;-ms-transition:height .25s ease .1s;transition:height .25s ease .1s;padding:0}
.menu li:hover > ul li{height:30px;overflow:visible;padding:0}
.menu ul li a{color:#fff;font:14px Arial;width:120px;margin:0;padding:6px 0 6px 30px;text-shadow:none;}
.menu ul li:first-child a{padding:6px 14px 6px 30px}
.menu ul li:last-child a{border:none}
