Como sempre vou tentar ser o mais claro e objetivo possível.
O objetivo é apresentar um menu com subsessões laterias, vamos utilizar HTML, CSS e JavaScript.
Vamos ao Post
Veja Abaixo o Link para o MENU:
Modelo de Menu com Subsessão
Primeiro vamos Criar o Código do Menu e para isto vamos utilizar o HTML.
Código HTML :
<ul id="nav">
<li><a href="#">Parte 1</a></li>
<li><a href="#">Parte 2</a>
<ul>
<li><a href="#">Parte 2-k</a></li>
<li><a href="#">Parte 2-l</a></li>
<li><a href="#">Parte 2-m</a></li>
</ul>
</li>
<li><a href="#">Parte 3</a>
<ul>
<li><a href="#">Parte 3-n</a></li>
<li><a href="#">Parte 3-o</a></li>
<li><a href="#">Parte 3-p</a></li>
<li><a href="#">Parte 3-q</a></li>
<li><a href="#">Parte 3-r</a></li>
<li><a href="#">Parte 3-r</a></li>
</ul>
</li>
</ul>
Percebam que para alguns itens do menu existe uma SubSessão UL com novos dados,
Código: CSS
<style type="text/css">
ul{
margin:0;
padding:0;
list-style:none;
width:150px;
border-bottom:1px solid #588EE0;
}
ul li
{
position:relative;
}
li ul
{
position:absolute;
left:149px;
top:0;
display:none;
}
ul li a
{
display:block;
text-decoration:none;
color #060864;
background:#B9F3F5;
padding:5px;
border:1px solid #588EE0;
border-bottom:0;
}
/*correção \*/
*html ul li {float:left;}
*html ul li a{height:1%;}
/* fim da correção*/
li:hover ul, li.over ul {
display:block;
}
</style>
Código JAVASCRIPT
<head>
<script language="JavaScript" type="text/JavaScript">
<!–
startList = function()
{
if (document.all&&document.getElementById)
{
navRoot = document.getElementById("nav");
for (i = 0; i<navRoot.childNodes.length; i++)
{
node = navRoot.childNodes[i];
if (node.nodeName=="LI")
{
node.onmouseover=function()
{
this.className+=" over";
}
node.onmouseout=function()
{
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
//–>
</script>
</head>
Lembrando que o Código JAvascript precisa de uma atenção maior por ser Case Sensitive.
Espero que possam aproveitar..
