Ir para conteúdo
Fórum Script Brasil
  • 0

Como centralizar menu na tela


moneyou

Pergunta

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}

Link para o comentário
Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Até agora não há respostas para essa pergunta

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,1k
    • Posts
      651,8k
×
×
  • Criar Novo...