Skip to content

Instantly share code, notes, and snippets.

@claudiosanches

claudiosanches/index.html

Created September 20, 2012 02:25
Show Gist options
  • Save claudiosanches/3753600 to your computer and use it in GitHub Desktop.
Save claudiosanches/3753600 to your computer and use it in GitHub Desktop.
Download ZIP
Menu CSS
Raw
index.html
<!DOCTYPE html>
<!--[if IE 6]><html id="ie6" dir="ltr" lang="pt-BR"><![endif]-->
<!--[if IE 7]><html id="ie7" dir="ltr" lang="pt-BR"><![endif]-->
<!--[if IE 8]><html id="ie8" dir="ltr" lang="pt-BR"><![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8)]><!--><html dir="ltr" lang="pt-BR"><!--<![endif]-->
<head>
<meta charset="UTF-8" />
<title>Menu</title>
<style>
/* Reset básico */
* {
margin: 0;
padding: 0;
}
/* Menu */
#main-menu {
}
#main-menu li {
/* Retira bullet da lista */
list-style: none;
/* Alinha links lado a lado */
float: left;
/* Importante para poder posicionar o submenu */
position: relative;
/* Ajuda na passagem do mouse do LI para o UL filho */
padding-bottom: 5px;
}
#main-menu a {
/* Estilo de fontes para exemplo */
color: #fff;
font: normal 700 14px/23px Arial, Verdana, sans-serif;
text-decoration: none;
/* Transforma em bloco para poder usar padding sem problemas */
display: block;
/* Gradiente em CSS3 só para ilustrar o exemplo :P */
background: #45484d;
background: -moz-linear-gradient(top, #45484d 0%, #000000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#45484d), color-stop(100%,#000000));
background: -webkit-linear-gradient(top, #45484d 0%,#000000 100%);
background: -o-linear-gradient(top, #45484d 0%,#000000 100%);
background: -ms-linear-gradient(top, #45484d 0%,#000000 100%);
background: linear-gradient(to bottom, #45484d 0%,#000000 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 );
padding: 10px 15px;
}
#main-menu a:hover {
/* Gradiente para o exemplo */
background: #000000;
background: -moz-linear-gradient(top, #000000 0%, #45484d 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#45484d));
background: -webkit-linear-gradient(top, #000000 0%,#45484d 100%);
background: -o-linear-gradient(top, #000000 0%,#45484d 100%);
background: -ms-linear-gradient(top, #000000 0%,#45484d 100%);
background: linear-gradient(to bottom, #000000 0%,#45484d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#45484d',GradientType=0 );
}
#main-menu ul {
/* Oculta os subs menus */
display: none;
/* Define posição que ele vai aparecer */
/* Lembrando que o li é relative. assim o nosso ul vai ser relativo ao li */
position: absolute;
top: 43px;
left: 0;
width: 180px;
background: #222;
}
#main-menu ul li {
/* retira o float dos li */
float: none;
/* Remove o padding */
padding-bottom: 0;
}
#main-menu ul li a {
background: none;
width: 150px;
}
#main-menu ul li a:hover {
background: #111;
}
/* A magica acontece aqui: */
#main-menu li:hover > ul {
/* Da display block no ul filho do li com efeito hover xD */
display: block;
}
/* Uma ajudinha com o efeito de hover dos menus primarios :P */
#main-menu li:focus > a {
background: #000;
}
#main-menu li:hover > a {
/* Gradiente para o exemplo */
background: #000000;
background: -moz-linear-gradient(top, #000000 0%, #45484d 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#45484d));
background: -webkit-linear-gradient(top, #000000 0%,#45484d 100%);
background: -o-linear-gradient(top, #000000 0%,#45484d 100%);
background: -ms-linear-gradient(top, #000000 0%,#45484d 100%);
background: linear-gradient(to bottom, #000000 0%,#45484d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#45484d',GradientType=0 );
}
/* Mais um nível de menu para ficar legal xD */
#main-menu ul ul {
top: 0;
left: 100%;
}
</style>
</head>
<body>
<ul id="main-menu">
<li><a href="">Lorem Ipsum</a>
<ul>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum &raquo;</a>
<ul>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum &raquo;</a>
<ul>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum &raquo;</a>
<ul>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum &raquo;</a>
<ul>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="">Lorem Ipsum</a>
<ul>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum &raquo;</a>
<ul>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum &raquo;</a>
<ul>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="">Lorem Ipsum</a>
<ul>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum &raquo;</a>
<ul>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum &raquo;</a>
<ul>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="">Lorem Ipsum</a>
<ul>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum &raquo;</a>
<ul>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum &raquo;</a>
<ul>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="">Lorem Ipsum</a>
<ul>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum &raquo;</a>
<ul>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum &raquo;</a>
<ul>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="">Menu normal</a></li>
<li><a href="">Menu normal</a></li>
<li><a href="">Menu normal</a></li>
</ul>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment