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

Centralizando Menu DropDown

Jones19

Perguntado por Jones19,

 Share

Pergunta

Jones19

Jones19

Postado
Postado

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
JaguA

JaguA

Postado
Postado

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.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,4k
×
×
  • Criar Novo...