html5 Menu em HTML5 E CSS3

MrPhantomRed · Junho 19, 2017

Preciso de ajuda com o menu que estou fazendo no meu site.

Bem, já fiz de tudo pra tentar arrumar esse site, mas não consigo, por isso estou mandando meu código HTML e CSS aqui.

HTML5:

<!DOCTYPE html>
<html lang="pt-br">
<head>
	<title>RUGBY</title>
    <meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="_css/normalize.css">
    <link rel="stylesheet" type="text/css" href="_css/index.css">
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800' rel='stylesheet' type='text/css'>
	<link rel="shortcut icon" href="_imagens/favicon.ico" type="image/x-icon">
<link rel="icon" href="_imagens/favicon.ico" type="image/x-icon">	
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="center clearfix">
    <header>
        <h1><a href="home.html" title="Logotipo Rugby"><img src="_imagens/Rugby.png"><span></span></a></h1>
<!-MENU-!>
        <nav>
		<ul class="menu">
		<li><a href="#"><img id="icone" src="_imagens/menu2.png"></a>
		<ul>
				<li><a href="#">Inicio</a></li>
				<li><a href="#">Entenda o Rugby</a>
						<ul>
							<li><a href="#">Guia para iniciantes</a></li>
							<li><a href="#">Glossário</a></li>
							<li><a href="#">História do rugby</a></li>                   
						</ul>
				</li>
				<li><a href="#">Onde jogar</a>
						<ul>                 
						</ul>
				</li>
				<li><a href="#">Sobre</a>
						<ul>
							<li><a href="#">Contato</a></li>
							<li><a href="#">Sobre "nós"</a></li>
						</ul>
							</li>               
		</ul>
		</ul>
        </nav>
<!-FIM MENU-!>
    </header>
	<section class="welcome">
    	<h2>RUGBY</h2>
  		<h3><span>TEXTO </span>TEXTO TEXTO <span> TEXTO</span> TEXTO TEXTO TEXTO.</h3>
    </section>
	<section class="container">
    	<div class="brancoex">
			<h3>TITULO</h3>
            <p>TEXTOTEXTOTEXTOTEXTOTEXTOTEXTOTEXTO<span class="btn"><a href="estrutura.html" title="Leia mais...">Leia mais...</a></span></p>
        </div>
        <div class="fonteex">
			<h3>TITULO</h3>
            <p>TEXTOTEXTOTEXTOTEXTOTEXTOTEXTOTEXTO<span class="btn"><a href="fonte.html" title="Leia mais...">Leia mais...</a></span></p>
        </div>
        <div class="menuex">
			<h3>TITULO</h3>
            <p>TEXTOTEXTOTEXTOTEXTOTEXTOTEXTOTEXTO<span class="btn"><a href="menu.html" title="Leia mais...">Leia mais...</a></span></p>
        </div>
	</section>
    <footer>
    	<small class="copyright">
        	<p>&copy 17087</p>
        </small>
    </footer>
</body>
</html>

CSS3:

body{
background:#282828;
color:#dadada;
font-family: "Open Sans", Helvetica, sans-serif, arial;
font-size: 1.125em;
font-weight: 300; 
line-height: 22px;
text-align: left; 
text-shadow:1px 1px 0px #4c4c4c; 
}
.center{
margin: 0 auto;
max-width:1200px;
width: 90%; 
}

.clearfix:before, .clearfix:after {
    content: &quot; &quot;;
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}
/*fim do clearfix*/
img, picture, video, embed {
    max-width: 100%; 
}
h1, h2{
color:#666666;
font-size: 60px;
font-weight: 800;
letter-spacing: -3px;
line-height: 60px;
}
h3{
font-size: 32px;
font-weight: 300;
letter-spacing: -2px; 
line-height: 38px;
}
p{
font-weight: 300;
letter-spacing: -1px; 
}
a, a:link, a:visited{
color:#a56256; 
font-weight:400; 
text-decoration:none; 
}
a:hover{
color:#FE5E41;
text-decoration:underline;
text-shadow:none;
}
header{
	border-bottom: 1px solid #E0E0E0;
	height:150px;
	width:100%;
}
/* Logotipo */
header h1 a{
		display:block; 
		float:left;
		height:120px; 
		text-indent:-9999; 
		width:35%;
		margin-top:-20px;
		margin-left:-100px;
	}
/*nav - menu de navegação*/
nav{
	float:right;
	margin-top:78px; 
	text-align:right; 
	width:41.6666666666667%;
}

/*SEÇÃO WELCOME*/
.welcome{
	height:290px;
	text-align:center;
	width:100%;
}
h2 span{
	font-size:1em;
	font-weight:300px;
	letter-spacing:-0.0333333333em;
	line-height:1em;
}
.welcome h3{
margin:0 auto;
width:75%;
}
/* CONTAINER - CONTEUDO COM 3 COLUNAS */
.container{
	background-color:#160d0b;
	height: 417px;
	padding:2.5%;
	width:95%;
}
.brancoex, .fonteex, .menuex{
	float:left;
	position:relative;
	text-align:center;
	width:31.57894736842105%;
}
.brancoex, .fonteex{
	margin-right: 2.631578947368421%;
}
.menuex{
	background-color:#1a1a1a;
	margin-right:0px;
}
.brancoex{
	background-color:#1a1a1a;
}
.fonteex{
	background-color:#1a1a1a;
}
/*imagens*/
#brancoex img, #fonteex img, #menuex img{
	margin: 10px auto -15px auto;
	text-align:center;
img {
max-width:100%
}
}
/*formatação do texto*/
.container h3{
	color:white;
	font-size: 1.77777777778em;
	font-weight: 300;
	letter-spacing: -0.0625em;
	margin-bottom: 30px;
	text-shadow:none;
}
.container p{
	background-color:#434343;
	float:left;
	height:160px;
	padding: 1.9444444444444445%;
	position:absolute;
	width-max:100%;
	text-align:justify;
	top:225px;
}
/*formatação do botão*/
span.btn{
	font-size:1.1111111111em;
	font-weight: 400;
	letter-spacing:-0.1em;
	height:27px;
	margin-top: 30px;
	position:absolute;
	right: 1px;
	text-align:center;
	text-shadow:none;
	width:33.33333333333333%;
}
span.btn a{
	color:#1a1a1a;
	padding: 2px 3.333333333333333%;
}
.brancoex span.btn a{
	background-color:#868686;
}
.fonteex span.btn a{
	background-color:#868686;
}
.menuex span.btn a{
	background-color:#868686;
}
/*Seção FOOTER - Rodape com 2 colunas*/

footer{
	clear:both;
	height: 50px;
	padding: 10px 0;
	width:100%;
}
.copyright{
	float:left;
	margin-left:2.5%;
}
.desenvolvedor{
	float:right;
}
.desenvolvedor figure{
	width:100%;
}
#menuu{
border:none;
margin-left:-32.9%;
width:100%;
height:100%;
overflow:hidden;
margin
}


/*MENU*/

/*esse aqui oculta as marcações da lista*/ 
.menu{
	list-style:none;
	float:left;
	}

/*esse faz ficar na horizontal*/
.menu li{
	position:relative;
	float:left;
}

/*esse aqui muda a cor dos links e tira o efeito de link no menu não suspenso*/
.menu li a{
	color:black;
	text-decoration:none;
	display:block;
	}
	

#icone{
width:17%;
height:17%;
}

Imagem do menu em anexo.

Podem editar o layout do menu como quiserem, apenas me ajudem a deixar coerente isso tudo.

Há páginas em cima de outras. t.t

Entrar

Arquivado

html5 Menu em HTML5 E CSS3

Recommended Posts

MrPhantomRed 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Abrir url na mesma janela

Saber se todos os produtos de uma consulta estão cadastrados no banco de dados

Sistema de Login

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante