I've successfully created a vertical navigation menu using CSS that includes two sub-menus. However, I am struggling to align them in a single column for proper functionality. Is there a way to achieve this?
HTML
<ul>
<li><a href="#">works</a>
<ul>
<li><a href="#">Category 1</a></li>
<li><a href="#">Category 2</a></li>
<li><a href="#">Category 3</a></li>
<li><a href="#">Category 4</a></li>
<li><a href="#">Category 5</a></li>
</ul>
</li>
<li><a href="#">photos</a>
<ul>
<li><a href="#">something</a></li>
<li><a href="#">something</a></li>
</ul>
</li>
<li><a href="#">friends</a></li>
<li><a href="#">contact</a></li>
</ul>
CSS
#menu {
font-size: 14px;
font-family: "Courier New", Courier, monospace;
}
#menu ul {
margin: 0px;
list-style-type: none;
}
#menu ul li {
position: relative;
}
#menu ul li a {
line-height: normal;
color: #000;
text-decoration: none;
}
#menu ul li ul {
display: none;
position: absolute;
top: 0px;
left: 180px;
float: left;
z-index: 99999;
width: 180px;
}
#menu ul li ul li {
min-width: 180px;
}
#menu ul li ul ul {
float: left;
top: 0px;
}
#menu ul li:hover > ul {
display:block;
}