vertical css dropdown menu in one column? - css

Question

I have created a vertical navigational menu in css with two sub-menus.
But I can't figure out how to position them in one column so that they work properly.
Is this possible?
html
<ul>
<li>works
<ul>
<li>something</li>
<li>something</li>
<li>something</li>
<ul>
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
<li>Category 4</li>
<li>Category 5</li>
</ul>
<li>something</li>
<li>something</li>
</ul>
</li>
<li>photos
<ul>
<li>something</li>
<li>something</li>
</ul>
</li>
<li>friends</li>
<li>contact</li>
</ul>
</div></html>
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;
}

Answer 1

First of all your html structure is messy. the clean structure could be something like this:
<div id="menu">
<ul>
<li>
works
<li>
works subcategory
<ul>
<li>something</li>
<li>something</li>
<li>something</li>
</ul>
</li>
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
<li>Category 4</li>
<li>Category 5</li>
</li>
<li>something</li>
<li>something</li>
<li>
photos
<ul>
<li>something</li>
<li>something</li>
</ul>
</li>
<li>friends</li>
<li>contact</li>
</ul>
</div>
You had mistakes in closing tags,..
And i suggest you to use css resets while making dropdown menus. because user-agent predefined styles get you in trouble (try Normalize.css)
In CSS: you don't need to float the 2nd-level ul blocks and also setting list items position property to relative and using top and left properties for children ul is not a good solution.
I styled your menu a little bit and it looks fine. you can view it here: http://codepen.io/anon/pen/sdomr