Skip to content

Instantly share code, notes, and snippets.

@fmagrosoto

fmagrosoto/Dropdown sencillo con CSS

Created May 12, 2013 22:15
Show Gist options
  • Save fmagrosoto/5565128 to your computer and use it in GitHub Desktop.
Save fmagrosoto/5565128 to your computer and use it in GitHub Desktop.
Download ZIP
Menú horizontal con dropdown sencillo usando solamente CSS
Raw
Dropdown sencillo con CSS
<!DOCTYPE html>
<html>
<head>
<title>Dropdown menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
nav ul {
font-family:sans-serif;
list-style:none;
text-decoration:none;
margin:0;
padding:0;
}
.nav > li {
float:left;
}
.nav li a {
background:#0c9ba0;
color:#FFF;
display:block;
border:1px solid;
padding:10px 12px;
}
.nav li a:hover {
background:#0fbfc6;
}
.nav li ul {
display:none;
position:absolute;
min-width:140px;
}
.nav li:hover > ul {
display:block;
}
</style>
</head>
<body>
<nav>
<ul class="nav">
<li><a href="">Bordadoras</a>
<ul>
<li><a href="">Tubulares</a></li>
<li><a href="">Planas</a></li>
</ul>
</li>
<li><a href="">Refacciones</a>
<ul>
<li><a href="">Mecánicas</a></li>
<li><a href="">Electrónicas</a></li>
</ul>
</li>
<li><a href="">Promociones</a></li>
<li><a href="">Distribuidores</a>
<ul>
<li><a href="">Mayoristas</a></li>
<li><a href="">Móviles</a></li>
<li><a href="">¿Cómo ser distribuidor?</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment