Adding sub-menu to vertical menu CSS - css

Question

This should be vertical menu with 2nd level sub menu as you can see 2 2.1 2.2
I tried many tutorials but just couldn't make it work i know lot of code for sub-menu is missing but honestly i have no idea what to do with it to fix it .
.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>1
</li>
<li>2
<ul>
<li>2.1
</li>
<li>2.2
</li>
</ul>
<li>3
</li>
<li>4
</li>
</ul>
</div>

Answer 1

Here you go.. why did you use absolute to .menu ul li ul this code was causing problem !!
.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>1
</li>
<li>2
<ul>
<li>2.1
</li>
<li>2.2
</li>
</ul>
<li>3
</li>
<li>4
</li>
</ul>
</div>