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

Ajuda com Menu em CSS


maariojunioor

Pergunta

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:

<style type="text/css">
/*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>
<div id="top-wrapper" class="hfeed">
<div id="header">
<center>
<a href="C:\Users\Home\Documents\Site Daynes\1 Index\daynes_index_V2.html" title="DAYNES" rel="home"> <!-- exemplo de site -->
<img id="logo" src="http://i.imgur.com/CPbuNBw.jpg"alt="">
</a>
</center>
</div>
<nav role='navigation'>
<ul class="menu"> <!-- Esse é o 1 nivel ou o nivel principal -->
<li><a href="#">Emprsa</a>
<ul class="submenu-1"> <!-- Esse é o 2 nivel ou o primeiro Drop Down -->
<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>
<ul class="submenu-1"> <!-- Esse é o 2 nivel ou o primeiro Drop Down -->
<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\4 Guia\Guia_Resultado_V2.html">Guia</a></li>
<li><a href="C:\Users\Home\Documents\Site Daynes\5 Contato\Contato_V2.html">Contato</a></li>
</li>
</ul>
</nav>
<br>
<br>
</ul>
<title>Daynes</title>
Muito obrigado, agradeço desde já!
Link para o comentário
Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

  • 0

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="teste6.css" />
</head>
<body>
<div id="menu1">
<nav role="navigation">
<ul class="menu"> <!-- Esse é o 1 nivel ou o nivel principal -->
<li><a href="#">Empresa</a>
<ul class="submenu-1"> <!-- Esse é o 2 nivel ou o primeiro Drop Down -->
<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>
<ul class="submenu-1"> <!-- Esse é o 2 nivel ou o primeiro Drop Down -->
<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\4 Guia\Guia_Resultado_V2.html">Guia</a></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; }
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,4k
×
×
  • Criar Novo...