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