moneyou

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}