将子菜单添加到垂直菜单CSS

Question

这应该是带有二级子菜单的垂直菜单，如您所见2 2.1 2.2 我尝试了很多教程，但是无法使其工作我知道很多子菜单的代码都丢失但老实说我不知道​​如何解决这个问题。

＆＃13;

＆＃13;

.menu ul li a {
  margin: 2px;
  padding: 2px;
  font-family: comic sans ms;
  border-bottom: 1px solid #ccc;
  height: 25px;
  width: 160px;
  -moz-border-radius: 1em 4em 1em 4em;
  border-radius: 1em 4em 1em 4em;
  border-color: red;
  cursor: pointer;
  cursor: url(link.cur), auto;
  text-decoration: none;
  color: white;
  padding: 9px 11px;
  background-color: grey;
  display: block;
}
.menu ul li a:visited {
  color: white;
}
.menu ul li a:hover,
.menu_simple ul li .current {
  color: white;
  background-color: #0099CC;
  /* green #5FD367 */
}
.menu ul li ul {
  position: absolute;
  display: none;
}
.menu ul li:hover ul {
  left: 150px;
  top: 0px;
  display: block;
}
.menu ul li ul li a {
  color: #454444;
  display: inline-block;
  width: 120px;
}

＆＃13;

<div class="menu">
  <ul>
    <li><a href="index.html">1</a>
    </li>
    <li><a href="#">2</a>
      <ul>
        <li><a href="#">2.1</a>
        </li>
        <li><a href="#">2.2</a>
        </li>
      </ul>
      <li><a href="#">3</a>
      </li>
      <li><a href="#">4</a>
      </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这里你去..为什么你使用绝对值.menu ul li ul这个代码导致了问题!!

.menu ul li a {
  margin: 2px;
  padding: 2px;
  font-family: comic sans ms;
  border-bottom: 1px solid #ccc;
  height: 25px;
  width: 160px;
  -moz-border-radius: 1em 4em 1em 4em;
  border-radius: 1em 4em 1em 4em;
  border-color: red;
  cursor: pointer;
  cursor: url(link.cur), auto;
  text-decoration: none;
  color: white;
  padding: 9px 11px;
  background-color: grey;
  display: block;
}
.menu ul li a:visited {
  color: white;
}
.menu ul li a:hover,
.menu_simple ul li .current {
  color: white;
  background-color: #0099CC;
  /* green #5FD367 */
}
.menu ul li ul {
  display: none;
}
.menu ul li:hover ul {
  left: 150px;
  top: 0px;
  display: block;
}
.menu ul li ul li a {
  color: #454444;
  display: inline-block;
  width: 120px;
}

<div class="menu">
  <ul>
    <li><a href="index.html">1</a>
    </li>
    <li><a href="#">2</a>
      <ul>
        <li><a href="#">2.1</a>
        </li>
        <li><a href="#">2.2</a>
        </li>
      </ul>
      <li><a href="#">3</a>
      </li>
      <li><a href="#">4</a>
      </li>
  </ul>
</div>