Добавление подменю в вертикальное меню CSS

Question

Это должно быть вертикальное меню с подменю 2-го уровня, как вы можете видеть 2 2.1 2.2 Я пробовал много учебников, но просто не мог заставить его работать, я знаю много кода для подменю отсутствует, но, честно говоря, я понятия не имею, что с ним делать, чтобы исправить это.

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

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

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>