html - 如何使用 CSS 添加子子菜单

Question

我正在尝试在网页中创建子子菜单。我尝试按照这篇文章中的帮助进行操作:how do I make a sub sub menu with 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>