Teste 2

by Gustavo Del Vechio

HTML

<div class="fundo">
		<header>
			<img id="logo" src="https://dl.dropboxusercontent.com/u/35273119/logoDV_C.png">
		</header>
		<nav>			
			<ul class="menu">
				<li id="paginaAtual"><a href="#">Início</a></li><!--
				--><li><a href="#">Quem somos</a></li><!--
				--><li><a href="#">O que fazemos</a></li><!--
				--><li><a href="#">Solicite um orçamento</a></li><!--
				--><li><a href="#">Scripts gratuitos</a>
					<ul>
						<li><a href="#">Illustrator</a></li>
						<li><a href="#">InDesign</a></li>
						<li><a href="#">Photoshop</a></li>
					</ul>
				</li><!--
				--><li><a href="#">Fale conosco</a></li>
			</ul>
		</nav>
		<article>
			<p>Nada por enquanto de conteúdo</p>
		</article>
		<footer>
			<p>2016 Del Vechio - Soluções em produtividade.<br>Todos os direitos reservados.</p>		
		</footer>
	</div>

CSS

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
}

.fundo {
  position: relative;
  min-height: 100%;
}

header {
  width: 100%;
  background-color: RGB(128, 0, 0);
  border-style: solid;
  border-width: 5px 0px 5px 0px;
  border-top-color: RGB(180, 0, 0);
  border-bottom-color: RGB(220, 0, 0);
}

#logo {
  display: block;
  padding: 30px 0px;
  /*cima e baixo, direita e esquerda*/
  width: 500px;
  max-width: 90%;
  margin: 0 auto;
}

.menu {
  margin: 0;
  padding: 0;
  background-color: RGB(100, 0, 0);
  text-align: center;
}

.menu a {
  text-decoration: none;
  color: RGB(255, 255, 255);
}

.menu > li {
  display: inline-block;
  padding: 15px;
}

#paginaAtual {
  border-style: solid;
  border-width: 0px 0px 6px 0px;
  border-color: RGB(220, 0, 0);
}

.menu > li:hover {
  background-color: RGB(180, 0, 0);
  border-style: solid;
  border-width: 0px 0px 6px 0px;
  border-color: RGB(220, 0, 0);
}

.menu li ul {
  position: absolute;
  margin-top: 20px;
  display: none;
}

.menu li:hover ul {
  display: block;
}

.menu li ul li {
  position: relative;
  left: -55px;
  background-color: RGB(80, 0, 0);
  display: block;
  padding: 10px;
  min-width: 150px;
  text-align: left;
  border-style: solid;
  border-width: 1px 0px 2px 0px;
  border-top-color: RGB(220, 220, 220);
  border-bottom-color: RGB(0, 0, 0);
}

.menu li ul li:hover {
  background-color: RGB(180, 0, 0);
  border-top-color: RGB(255, 255, 255);
  border-bottom-color: RGB(255, 0, 0);
}

article {
  margin: 0;
  padding: 0, 0, 100px, 0;
  width: 100%;
}

footer {
  position: absolute;
  bottom: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: RGB(100, 0, 0);
  border-style: solid;
  border-width: 5px 0px 0px 0px;
  border-top-color: RGB(220, 0, 0);
}

footer p {
  padding: 10px 0px 10px 30px;
  color: RGB(255, 255, 255);
}