Add a css sub menu on a simple template menu - html

Question

I have a template with a simple menu inside the site, and I am a newbie with css.
I Want to add a sub menu just below the menu and a subsub menu on the right side
of the sub menu.
Here is my html code:
<div class="site-nav">
<ul>
<li><span>Home</span></li>
<li><span>A UNNO</span></li>
<li><span>Produtos</span>
<ul>
<li>Product 1
<ul>
<li>Sub Product 1</li>
<li>Sub Product 2</li>
<li>Sub Product 3</li>
</ul>
</li>
<li><span>Serviços</span></li>
</ul>
</ul>
</div>
and this is the CSS that belongs to the menu.
.site-nav {
width:100%;
overflow:hidden;
}
.site-nav ul {
float: right;
background-color: #1e1a18;
height: 70px;
border-top: 1px solid #221d19;
}
.site-nav ul li {
font-size:1.08em;
float:left;
background:url(images/divider.gif) repeat-y right top;
padding-right:2px;
}
.site-nav ul li a {
color:#fff;
text-decoration:none;
display:block;
background:url(images/nav-bg.gif) no-repeat 21px 32px;
width:119px;
height:70px;
}
.site-nav ul li a span {
display:block;
padding:26px 0 0 35px;
}
.site-nav ul li a:hover,
.site-nav ul li a.active {
background-color:#ed1c24;
}
.site-nav ul li.twitter {
background:none;
padding:23px 0 0 0;
border-right:1px solid #080808;
text-align:center;
width:102px;
}
.site-nav ul li.twitter a,
.site-nav ul li.twitter a:hover {
background:none;
}
.site-nav ul li.twitter a {
display:inline;
}

Answer 1

Try this:
<nav>
<ul>
<li class="tabs">Home</li>
<li class="tabs">A UNNO</li>
<li class="tabs">Produtos
<ul>
<li>Sub Product 1
<ul>
<li>Sub Sub Product 1</li>
</ul>
</li>
<li>Sub Product 2</li>
<li>Sub Product 3</li>
</ul>
</li>
<li class="tabs">Servicos</li>
</ul>
</nav>
and use a display: none; to hide the submenus and only show them on hover.
JSFIDDLE