Crie primeiro a página HTML - INDEX.HTML
ESTRUTURA:
CÓDIGO FONTE DO HTML:
<html>
<head>
<title>Menu Dropdown Horizontal - Web 2</title>
<!-- Aqui chamamos o nosso arquivo css externo -->
<link rel="stylesheet" type="text/css" href="estilo.css" />
<!--[if lte IE 8]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<nav>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#">O que fazemos?</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">SEO</a></li>
<li><a href="#">Design</a></li>
</ul>
</li>
<li><a href="#">Fotos</a></li>
<li><a href="#">Contato</a></li>
</ul>
</nav>
</body>
</html>
CÓDIGO FONTE DO ARQUIVO CSS - ESTILO.CSS:
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 149px;
top: 0;
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #E2144A;
background: #fff;
padding: 5px;
border: 1px solid #ccc;
}
li:hover ul { display: block; }
Nenhum comentário:
Postar um comentário