html - 在简单的模板菜单上添加一个 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