如何使用CSS添加子菜單

Question

我正在嘗試在網頁中創建子菜單。 我嘗試遵循本文中的幫助： 如何使用CSS制作子菜單？ 但是說實話，我不明白我必須在每個類中添加什么代碼，而當我嘗試時卻什么也沒顯示。 這是菜單的代碼：

<div class="l7menu">
  <ul class="dpdown">
    <li class="mainlist"><a href="#">Hombres</a>
      <ul class="sub_menu">
          <a href="#">Prueba</a>
          <a href="#">Here goes the sub-submenu</a>
          <ul>
         <li> <a href="#">Item 1</a> </li>
        <li> <a href="#">Item 2</a> </li>
          </ul>
      </ul>
    </li>
  </ul>
</div>

這些類的CSS也是這些（sub_menu和l7menu類沒有應用任何樣式）：

.mainlist {
  border-bottom: 2px solid #EAD704;
  background: none;
  margin-left: 2px !important;
}
.mainlist:hover {
  color: #EAD704 !important;
}
ul.dpdown {
  float: right;
  position: relative;
  z-index: 1000;
}
ul.dpdown li {
  font-weight: bold;
  float: left;
  zoom: 1;
  display: inline;
  line-height: 20px;
  list-style: none outside none;
  margin-left: -25px;
}
ul.dpdown a:hover {
  color: #EAD704;
}
ul.dpdown a:active {
  color: #FFFFFF;
}
ul.dpdown li a {
  color: #e8e8e8;
  display: block;
  padding-bottom: 4px;
  text-align: center;
  width: 150px;
}
ul.dpdown li:last-child a {
  border-right: none;
} /* Doesn't work in IE */
ul.dpdown li.hover, ul.dpdown li:hover {
  color: black;
  position: relative;
}
ul.dpdown li.hover a {
  color: white;
}
/*
  LEVEL TWO
*/
ul.dpdown ul {
  width: 150px;
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0;
}
ul.dpdown ul li {
  font-weight: normal;
  background: #333;
  color: #000;
  float: none;
}
/* IE 6 & 7 Needs Inline Block */
ul.dpdown ul li a {
  background-color: #101010;
  border-right: medium none;
  display: inline-block;
  margin-top: 2px;
  padding: 10px 0;
  width: 150px;
  font-size: 13px;
  color: #999999;
}
ul.dpdown ul li a:hover {
  background-color: #222222;
}
/*
  LEVEL THREE
*/
ul.dpdown ul ul {
  left: 100%;
  top: 0;
}
ul.dpdown li:hover > ul {
  visibility: visible;
}

一如既往的非常感謝您！

Answer 1

這是FIDDLE ，我修復了您的CSS有點。

您的HTML應該如下所示

<div class="l7menu">
  <ul class="dpdown">
    <li class="mainlist"><a href="#">Hombres</a>
      <ul class="sub_menu">
        <li><a href="#">Prueba</a></li>
        <li><a href="#">Here goes the sub-submenu</a>
          <ul>
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
            <li><a href="#">Item 4</a></li>
            <li><a href="#">Item 5</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
  </ul>
</div>