How To Create An Unordered List Inside An Unordered List In A List Menu?

On my page, I'm trying to create an unordered list within an unordered list in my menu so that there is a second dropdown menu. The problem is that the second dropdown menu display

Solution 1:

The key to getting the sub-menu working is to use the child combinator (>) to target direct descendants.

A child combinator describes a childhood relationship between two elements. A child combinator is made of the "greater-than sign" (U+003E, >) character and separates two sequences of simple selectors.

(http://www.w3.org/TR/css3-selectors/#child-combinators)

The following changes are required:

• Add the .menu li ul ul setting left: 100%; and top: 0;. This will tell all sub-menus to be positioned against the right edge of its parent menu.
• Change .menu li:hover ul to .menu li:hover > ul. This will ensure that only the direct child ul is shown when the user hovers over the parent li.
• Change .menu li ul a:hover, .menu li ul li:hover a to .menu li ul li:hover > a. This will ensure that only the direct child as are highlighted when the user hovers over the parent li.

.menu {
  border: none;
  border: 0px;
  margin: 0px;
  padding: 0px;
  font: 67.5%"Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;
}
.menu ul {
  background: #333333;
  height: 35px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu li {
  float: left;
  padding: 0px;
}
.menu li a {
  background: #333333 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqiRSoFKt9JtGgqDG8wtsUBPZQpOuIHn3OnpIjBKCaf8Fk5JF3BHq-zYfSwVl1l62FCT_uUJrgrZwhhuUpeSAkqqfoUjlmOYuV8HX0pXbjUY81gONV5h2t-Jt2eWKHyd576zZJRDrkzLN6/s1600/seperator.gif") bottom right no-repeat;
  color: #cccccc;
  display: block;
  font-weight: normal;
  line-height: 35px;
  margin: 0px;
  padding: 0px 25px;
  text-align: center;
  text-decoration: none;
}
.menu li a:hover,
.menu ul li:hover a {
  background: #2580a2 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNo0egnKgEwyRyrvh_Z9PEUOP7YrT6DBPZzYyYf8wOGeKjuz2IVUZEG8ahLJhO1iTxjr0nZRaBPXEKMFKEvv_Hz_P6gMbSLO46_9G2fybm2lqOu3tlrUHoGdxEs7c-DtqpdDzqv8URIN8X/s1600/hover.gif") bottom center no-repeat;
  color: #FFFFFF;
  text-decoration: none;
}
.menu li ul {
  background: #333333;
  display: none;
  height: auto;
  padding: 0px;
  margin: 0px;
  border: 0px;
  position: absolute;
  width: 225px;
  z-index: 200;
}
.menu li ul ul {
  top: 0;
  left: 100%;
}
.menu li:hover > ul {
  display: block;
}
.menu li li {
  background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP73KQj8kVnGDcqKW-u8f0EFuESh7bjBiijqPW6B3zx2u6AcALeD5BWZqFyz7w7_Exy_HHmM8Ck0FMm1dMBC6cZMrTnqbPUi0rxMeBMXSWfRcJt3WKRKJw2PZrXM2Q46d8XHmJXVZgMzKT/s1600/sub_sep.gif') bottom left no-repeat;
  display: block;
  float: none;
  margin: 0px;
  padding: 0px;
  width: 225px;
}
.menu li:hover li a {
  background: none;
}
.menu li ul a {
  display: block;
  height: 35px;
  font-size: 12px;
  font-style: normal;
  margin: 0px;
  padding: 0px 10px 0px 15px;
  text-align: left;
}
.menu li ul li:hover > a {
  background: #2580a2 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQZvwEDMKNjvgRAIZdzbX3FSeqZw7qYRORR3M7i1h-czsBzJCklyDw33vcBplnTeL_yrGrrlDu4Dolz-fSNHknnHSTq6cnHb8K-mluCxcyy45nFeWoQqcwcDinsEGkLCVq_JQGDTC11OWq/s1600/hover_sub.gif') center left no-repeat;
  border: 0px;
  color: #ffffff;
  text-decoration: none;
}

<div class="menu">
  <ul>
    <li><a href="/search/label/game">Games</a>
      <ul id="1">
        <li><a href="/search/label/minecraft">minecraft</a>
          <ul id="2">
            <li><a href="/search/label/Project">Projects</a>
            </li>
            <li><a href="/search/label/Texture Pack">Texture Packs</a>
            </li>
            <li><a href="/search/label/Skin">Skins</a>
            </li>
            <li><a href="/search/label/Mod">Mods</a>
            </li>
            <li><a href="/search/label/Other">Other Stuff</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>