Добавить css подменю в меню простого шаблона

Question

У меня есть шаблон с простым меню внутри сайта, и я новичок с css. Я хочу добавить подменю под меню и подменю в правой части подменю. Вот мой HTML-код:

<div class="site-nav"> 
    <ul> 
    <li><a href="index.html"><span>Home</span></a></li> 
    <li><a href="UNNO.html"><span>A UNNO</span></a></li> 
    <li><a href="#" class="active"><span>Produtos</span></a> 
     <ul> 
     <li><a href="#">Product 1</a> 
      <ul> 
      <li><a href="#">Sub Product 1</a></li> 
      <li><a href="#">Sub Product 2</a></li> 
      <li><a href="#">Sub Product 3</a></li> 
      </ul> 
     </li> 
     <li><a href="Servicos.html"><span>Serviços</span></a></li> 
     </ul> 
    </ul> 
</div> 

и это CSS, который принадлежит к меню.

.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

Попробуйте это:

<nav> 
    <ul> 
     <li class="tabs"><a href="#">Home</a></li> 
     <li class="tabs"><a href="#">A UNNO</a></li> 
     <li class="tabs"><a href="#">Produtos</a> 
      <ul> 
       <li><a href="#">Sub Product 1</a> 
        <ul> 
         <li><a href="#">Sub Sub Product 1</a></li> 
        </ul> 
       </li> 
       <li><a href="#">Sub Product 2</a></li> 
       <li><a href="#">Sub Product 3</a></li> 
      </ul> 
     </li> 
     <li class="tabs"><a href="#">Servicos</a></li> 
    </ul> 
</nav> 

и использовать display: none;, чтобы скрыть подменю и только показать им, при наведении курсора мыши.

JSFIDDLE