如何使用CSS添加子菜单

Question

Im trying to do a sub-sub menu in a webpage. I tried following the help in this post: how do I make a sub sub menu with css? but to be honest i didnt understand what code i had to add in each class and when i tried it didnt show anything. Here is the code of the menu:

<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>

Also the CSS of the classes are these ones (The sub_menu and l7menu class dont have any style applied):

.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;
}

As always thank you very very much !

Answer 1

Here's a FIDDLE , I fixed your CSS a little.

Your HTML should look like this

<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>