UL list items stacking from the bottom instead of top - html

Question

I have an ul that isn't stacking properly (or is, but not to my desired outcome.)
http://jsfiddle.net/rrrpy1rk/
html:
<ul id="footer_site_map">
<li class="footer_parent">About
<ul class="footer_of_children">
<li class="footer_children">Our Veterinarians
</li>
<li class="footer_children">Our Staff
</li>
</ul>
</li>
<li class="footer_parent">Preventative Medicine
<ul class="footer_of_children">
<li class="footer_children">Puppies
</li>
<li class="footer_children">Kittens
</li>
<li class="footer_children">Adult Care
</li>
<li class="footer_children">Senior Care
</li>
<li class="footer_children">Rabbits
</li>
</ul>
</li>
<li class="footer_parent">Surgical
<ul class="footer_of_children">
<li class="footer_children">Spaying
</li>
<li class="footer_children">Neutering
</li>
<li class="footer_children">Orthopedic Surgery
</li>
<li class="footer_children">Soft Tissue Surgery
</li>
<li class="footer_children">Declawing Cat
</li>
</ul>
</li>
<li class="footer_parent">Medical
<ul class="footer_of_children">
<li class="footer_children"> Complete Medical Assessment
</li>
<li class="footer_children">Cardiology
</li>
<li class="footer_children">Flea Treatment
</li>
<li class="footer_children">Dentistry
</li>
<li class="footer_children">Radiology
</li>
<li class="footer_children">Laboratory
</li>
</ul>
</li>
</ul>
CSS:
#footer_site_map {
position:absolute;
padding:0;
margin:0;
top: 20px;
left: 0;
width:100%;
}
.footer_parent {
position: relative;
width: 180px;
height:20px;
padding: 0 5px;
display: inline-block;
}
.footer_parent a {
color: #FFF;
text-decoration: none;
font-family: MyriadProSemibold;
font-size: 120%;
}
.footer_children {
padding: 5px 0;
width: 200px;
}
.footer_children a {
color: #FFF;
list-style-type: none;
text-decoration: none;
font-family: ralewayregular !important;
font-size: 100%;
}
.footer_of_children {
padding: 0;
margin:0;
}
As seen from the fiddle the parent ul li's are stacking on top of the children ul li's. I need it to go the other way around.
Is there some easy fix, or should I re-structure it.
If you look at the fiddle, you may need to drag the bar to increase the size of the Result.

Answer 1

Addding vertical-align: top; to your .footer_parent fixes the issue:
.footer_parent {
position: relative;
width: 180px;
height: 20px;
padding: 0 5px;
display: inline-block;
vertical-align: top;
}