Menu popup dinânico (DHTML) com infinitos níveis usando apenas CSS
Dica publicada em Linux / Introdução
Menu popup dinânico (DHTML) com infinitos níveis usando apenas CSS
Esta dica descreve a criação de um menu popup dinânico (DHTML) com infinitos níveis usando apenas CSS.Menu popup dinânico (DHTML) com infinitos níveis usando apenas CSS
Oi, pessoal! com base nesse tuto, elaborei um menu com infinitos níveis. Me resolveu um problema, espero que possa ser útil. Muito legal, vale a pena ver conferir:Código da página de teste:
Código do CSS:
body {
font: normal 11px verdana;
}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 149px; /* Set 1px less than menu width */
top: 0;
display: none;
}
/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #eee; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc; /* IE6 Bug */
border-bottom: 0;
}
ul li a:hover {
display: block;
text-decoration: none;
color: #777;
background: #ffb; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc; /* IE6 Bug */
border-bottom: 0;
}
/* Holly Hack. IE Requirement \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
ul ul { display: none; }
li:hover > ul { display: block; }/* The magic */
.menu {
margin: 0;
padding: 0;
list-style: none;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
.menu .nav {
position: relative;
left: 0px; /* Set 1px less than menu width */
top: 0px;
border-bottom: 0px solid #ccc;
}
/* End */
font: normal 11px verdana;
}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 149px; /* Set 1px less than menu width */
top: 0;
display: none;
}
/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #eee; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc; /* IE6 Bug */
border-bottom: 0;
}
ul li a:hover {
display: block;
text-decoration: none;
color: #777;
background: #ffb; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc; /* IE6 Bug */
border-bottom: 0;
}
/* Holly Hack. IE Requirement \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
ul ul { display: none; }
li:hover > ul { display: block; }/* The magic */
.menu {
margin: 0;
padding: 0;
list-style: none;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
.menu .nav {
position: relative;
left: 0px; /* Set 1px less than menu width */
top: 0px;
border-bottom: 0px solid #ccc;
}
/* End */
É isso aí! Espero ter sido útil! O código é gratuito e livre para uso nas suas páginas.