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

Centralizando Menu DropDown


Jones19

Pergunta

Olá Galera estou com uma Pequena Duvida.

Criei Este menu DropDown Porem Quando eu Abro Ele No Navegador está Ficando Posicionado na Esquerda e Devido a Quantidade de Menus Fica um Sobra de Pagina.

Gostaria de Centralizar este Menu.

Gostaria tb de Saber como Posso Aumentar O Tamanho de Cada Menu Inidiviual Se Possivel Obrigado.

Vou Postar Abaixo as Imagens do CODIGO CSS E HTML.

Código HTML Abaixo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

<link href="dropDown.css" rel="stylesheet" type="text/css" />

<link href="dropDown.css" rel="stylesheet" type="text/css" />

</head>

<body>

<body bgcolor="black">

<div id="wrapper">

<div id="navMenu">

<ul>

<li><a href="#">Products</a>

<ul>

<li><a href="#">Link Item</a></li>

<li><a href="#">Link Item</a></li>

<li><a href="#">Link Item</a></li>

<li><a href="#">Link Item</a></li>

<li><a href="#">Link Item</a></li>

<li><a href="#">Link Item</a></li>

</ul> <!-- end inner UL -->

</li> <!-- end main LI -->

</ul> <!-- end main UL -->

<ul>

<li><a href="#">Products</a>

<ul>

<li><a href="#">Link Item</a></li>

<li><a href="#">Link Item</a></li>

<li><a href="#">Link Item</a></li>

<li><a href="#">Link Item</a></li>

<li><a href="#">Link Item</a></li>

<li><a href="#">Link Item</a></li>

</ul> <!-- end inner UL -->

</li> <!-- end main LI -->

</ul> <!-- end main UL --><ul>

<li><a href="#">Products</a>

<ul>

<li><a href="#">Link Item</a></li>

<li><a href="#">Link Item</a></li>

<li><a href="#">Link Item</a></li>

<li><a href="#">Link Item</a></li>

<li><a href="#">Link Item</a></li>

<li><a href="#">Link Item</a></li>

</ul> <!-- end inner UL -->

</li> <!-- end main LI -->

</ul> <!-- end main UL --><ul>

<li><a href="#">Products</a>

<ul>

<li><a href="#">Link Item</a></li>

<li><a href="#">Link Item</a></li>

<li><a href="#">Link Item</a></li>

<li><a href="#">Link Item</a></li>

<li><a href="#">Link Item</a></li>

<li><a href="#">Link Item</a></li>

</ul> <!-- end inner UL -->

</li> <!-- end main LI -->

</ul> <!-- end main UL -->

<ul>

<li><a href="#">Products</a>

<ul>

<li><a href="#">Link Item</a></li>

<li><a href="#">Link Item</a></li>

<li><a href="#">Link Item</a></li>

<li><a href="#">Link Item</a></li>

<li><a href="#">Link Item</a></li>

<li><a href="#">Link Item</a></li>

</ul> <!-- end inner UL -->

</li> <!-- end main LI -->

</ul> <!-- end main UL --><ul>

<li><a href="#">Products</a>

<ul>

<li><a href="#">Link Item</a></li>

<li><a href="#">Link Item</a></li>

<li><a href="#">Link Item</a></li>

<li><a href="#">Link Item</a></li>

<li><a href="#">Link Item</a></li>

<li><a href="#">Link Item</a></li>

</ul> <!-- end inner UL -->

</li> <!-- end main LI -->

</ul> <!-- end main UL -->

<br class="clearFloat" />

</div> <!-- end navMenu -->

</div> <!-- end wrapper div -->

</body>

</html>

=========================================================

Codigo CSS abaixo:

@charset "utf-8";

#navMenu {

margin:0;

padding:0;

}

#navMenu ul {

margin:0;

padding:0;

line-height:30px;

}

#navMenu li {

margin:0;

padding:0;

list-style:none;

float:left;

position:relative;

background:#999;

}

#navMenu ul li a {

text-align:center;

font-family:"Comic Sans MS", cursive;

text-decoration:none;

height:30px;

width:150px;

display:block;

color:#FFF;

border:1px solid #FFF;

text-shadow:1px 1px 1px #000;

}

#navMenu ul ul {

position:absolute;

visibility:hidden;

top:32px;

margin:0 auto;

}

#navMenu ul li:hover ul {

visibility:visible;

}

/**************************************************/

#navMenu li:hover {

background:#09F;

}

#navMenu ul li:hover ul li a:hover {

background:#CCC;

color:#000;

}

#navMenu a:hover {

color:#000;

}

.clearFloat {

clear:both;

margin:0;

padding:0;

}

Desde já Agradeço e conto com a colaboração de vocês.

Link para o comentário
Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

  • 0

para aumentar individual tera que atribuir CSS personalizado a cada um, podes fazer isso dando style="" na tag html do menu que deseja.

para centralizar tera que da margin auto no menu ou seja se você tem uma div e dentro dela ta o menu é nessa div que deve ficar este comando

pois ele ira joga automaticamente 100% pra direita e esquerda assim ele ficara centralizado.

Link para o comentário
Compartilhar em outros sites

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,3k
    • Posts
      652,3k
×
×
  • Criar Novo...