Ajuda com Menu em CSS

maariojunioor · June 8, 2015

Bom dia, pessoal.

Estou produzindo um site para uma empresa, estou fazendo ele em HTML e CSS simples, pois não tenho muito conhecimento.

Está tudo quase pronto, falta apenas o menu que eu criei em HTML e coloquei um estilo em CSS. Esse menu fica sempre a esquerda da página e eu não estou conseguindo trazer ele para o meio. Já tentei de tudo, procurei e li muito sobre isso na internet durante o final de semana todo e agora estou sem opções. Vocês poderiam, por favor, me ajudar?

Segue o codigo:

/*Configurações Padrões*/

ul.menu, .menu li, .menu a{ margin:0; padding:0; list-style:none; text-decoration:none;}

ul.menu ul{ position:absolute; display:none; box-shadow:3px 3px 2px #333;}

/* Configurações nivel 1*/

ul.menu{ float:left; font-family:Verdana, Geneva, sans-serif; font-size:15px; border-radius:5px; padding:0 5px;}

.menu li{ float:left; width:auto; position:relative;}

.menu li a{ display:block; padding:0 20px; line-height:45px; height:45px; float:left; transition:all 0.1s linear; }

/* Configurações nivel 2*/

.menu li:hover > ul.submenu-1{ display:block; top:45px; left:0; padding:5px; width:200px; border-radius:0 0 5px 5px; }

.menu ul.submenu-1 a{ width:160px; padding:0 20px; border-radius:5px; }

/* Configurações nivel 2*/

.menu li:hover > ul.submenu-2{ display:block; top:0; left:195px; padding:5px; width:200px; border-radius: 0 5px 5px 5px; }

.menu ul.submenu-2 a{ width:160px; padding:0 20px; border-radius:5px; }

/* Configurações nivel 3*/

.menu li:hover > ul.submenu-3{ display:block; top:0; left:195px; padding:5px; width:200px; border-radius: 0 5px 5px 5px; }

.menu ul.submenu-3 a{ width:160px; padding:0 20px; border-radius:5px; }

/*Configurações de cores*/

/*nivel 1*/

.menu{background:#FF0; }

.menu a{ color:#000;}

.menu li:hover > a{ background:#999; color:#fff;}

/*nivel 2*/

.submenu-1{ background:#FFFF99;}

.submenu-1 a{color:#000;}

.submenu-1 li:hover > a{ background:#666; }

body {

background-image: url("BG_teste.jpg"); /* esta declaração possui estes parenteses sim*/

}

</style>

</a>

</center>

</div>

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

<li><a href="C:\Users\Home\Documents\Site Daynes\2 Empresa\Sobre_Nos_V2.html">Sobre Nós</a></li>

<li><a href="C:\Users\Home\Documents\Site Daynes\2 Empresa\Noticias_V2.html">Notícias</a></li>

</ul>

<li><a href="#">Serviços</a>

<li><a href="C:\Users\Home\Documents\Site Daynes\3 Serviço\Servico_Bambu_V2.html">Bambu</a></li>

<li><a href="C:\Users\Home\Documents\Site Daynes\3 Serviço\Servico_Fotos_V2.html">Fotos</a></li>

</ul>

</li>

<li><a href="C:\Users\Home\Documents\Site Daynes\5 Contato\Contato_V2.html">Contato</a></li>

</li>

</ul>

</nav>

<br>

</ul>

<title>Daynes</title>

Muito obrigado, agradeço desde já!

joao22666 · June 18, 2015

Olá, também sou novo em programação html+css, mais consegui resolver o seu problema, fiz algumas mudanças como por exemplo criei um estilo a parte e não dentro do Html. Dei o nome de teste06.css como você pode ver antes do fechamento do </head>.

Segue código html e css abaixo, qualquer dúvida é só entrar em contato.

Abraço.

Código HTML:

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

<head>

<title>Untitled Document</title>

</head>

<body>

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

<li><a href="C:\Users\Home\Documents\Site Daynes\2 Empresa\Sobre_Nos_V2.html">Sobre Nós</a></li>

<li><a href="C:\Users\Home\Documents\Site Daynes\2 Empresa\Noticias_V2.html">Notícias</a></li>

</ul>

<li><a href="#">Serviços</a>

<li><a href="C:\Users\Home\Documents\Site Daynes\3 Serviço\Servico_Bambu_V2.html">Bambu</a></li>

<li><a href="C:\Users\Home\Documents\Site Daynes\3 Serviço\Servico_Fotos_V2.html">Fotos</a></li>

</ul>

</li>

<li><a href="C:\Users\Home\Documents\Site Daynes\5 Contato\Contato_V2.html">Contato</a></li>

</li>

</ul>

</nav>

</div>

</body>

</html>

Código CSS:

@charset "utf-8";

/* CSS Document */

/*Configurações Padrões*/

#menu1{

width:960px;

height:150px;

margin:0 auto;

text-align:center;

}

nav{

width:400px;

margin:0 auto;

}

ul.menu, .menu li, .menu a{ margin:0; padding:0; list-style:none; text-decoration:none;}

ul.menu ul{ position:absolute; display:none; box-shadow:3px 3px 2px #333;}

/* Configurações nivel 1*/

ul.menu{ float:left; font-family:Verdana, Geneva, sans-serif; font-size:15px; border-radius:5px; padding:0 5px;}

.menu li{ float:left; width:auto; position:relative;}

.menu li a{ display:block; padding:0 20px; line-height:45px; height:45px; float:left; transition:all 0.1s linear; }

/* Configurações nivel 2*/

.menu li:hover > ul.submenu-1{ display:block; top:45px; left:0; padding:5px; width:200px; border-radius:0 0 5px 5px; }

.menu ul.submenu-1 a{ width:160px; padding:0 20px; border-radius:5px; }

/* Configurações nivel 2*/

.menu li:hover > ul.submenu-2{ display:block; top:0; left:195px; padding:5px; width:200px; border-radius: 0 5px 5px 5px; }

.menu ul.submenu-2 a{ width:160px; padding:0 20px; border-radius:5px; }

/* Configurações nivel 3*/

.menu li:hover > ul.submenu-3{ display:block; top:0; left:195px; padding:5px; width:200px; border-radius: 0 5px 5px 5px; }

.menu ul.submenu-3 a{ width:160px; padding:0 20px; border-radius:5px; }

/*Configurações de cores*/

/*nivel 1*/

.menu{background:#FF0; }

.menu a{ color:#000;}

.menu li:hover > a{ background:#999; color:#fff;}

/*nivel 2*/

.submenu-1{ background:#FFFF99;}

.submenu-1 a{color:#000;}

.submenu-1 li:hover > a{ background:#666; }

Sign In

Ajuda com Menu em CSS

Question

maariojunioor

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

joao22666

Link to comment

Share on other sites

Join the conversation

Forum Statistics

Browse

Activity