Jump to content
Fórum Script Brasil
  • 0

Ajuda com Menu em CSS


maariojunioor
 Share

Question

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 to comment
Share on other sites

1 answer to this question

Recommended Posts

  • 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 to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Forum Statistics

    • Total Topics
      149.8k
    • Total Posts
      646.6k
×
×
  • Create New...