Absolutely positioned child's top edge pinned to the bottom edge of its parent that has unknown height?

Question

As per the title, which hopefully is intelligible despite being a bit of a mouthful. Just to spell it out a bit more clearly:

This is part of a drop-down menu system. I want a submenu to appear directly below the parent list item. Here is my HTML:

<ul>
    <li>
        <a href="#">Item 1
            <ul>
                <li><a href="#">Sub menu 1</a></li>
                <li><a href="#">Sub menu 2</a></li>
                <li><a href="#">Sub menu 3</a></li>
            </ul>
        </a>
    </li>
    <li>
        <a href="#">Item 2</a>
    </li>
</ul>

The top level li elements are of unknown (dynamic) height. I want the child ul to appear directly under its parent, with left edges aligned, and the child's top edge pinned to the bottom edge of the parent.

I've been writing CSS for a few years now but realised I have no idea how to do this, or if it is possible... any ideas? Thanks.

EDIT

What I am asking for -logically- is very simple. The question is the title, and perhaps I muddied the waters by talking about the specific scenario where I've encountered this. Here is a much simpler example of the problem:

<div class="parent">
    <div class="child"></div>
</div>

---

.parent {
    position: absolute;
    top:200px;
    left:50px;
    width: 500px;
    height: 200px; /* this needs to be dynamic */
    background-color: green;
}

.child {
    position: absolute;
    bottom:0;
    left:0px;
    width: 100px;
    height: 100px;
    background-color: purple;
}

https://jsfiddle.net/4ww9h3wu/

I want the top edge of the purple box stuck to the bottom of the green box, while the height of the green box is dynamic. Ya dig?

Answer 1

This usually does it for me...but without your CSS it's hard to be sure it will work in your instance.

li {
position:relative;
}

li > ul {
position:absolute;
left:0;
top:100%;
}

Answer 2

Note that you can't nest anchor tags. Therefore here is a solution using valid HTML. Notice the markup change.

By using position absolute but not setting left or top you have a subnav that positions itself directly under the block-level element that precedes it.

(I also have an accessible solution that I have added as a link in the jsFiddle version of my solution.)

 ul, li { margin: 0; padding: 0; } ul { list-style:none; } .top-navigation { margin: 20px; } .top-nav-item { position: relative; display: inline-block; vertical-align: top; width: 120px; } .top-nav-item:not(:first-child) { margin-left: -.3em; } .top-nav-link { display: block; border: 1px solid red; padding: 5px; } .sub-navigation { position: absolute; display: none; background-color: #fff; } .sub-nav-item { display: block; border: 1px solid green; border-top: none; padding: 5px; } .top-nav-item:hover .sub-navigation { display: block; } 

 <ul class="top-navigation"> <li class="top-nav-item"> <a href="#" class="top-nav-link">Item 1</a> <ul class="sub-navigation"> <li class="sub-nav-item"><a href="#" class="sub-nav-link">Sub menu 1</a></li> <li class="sub-nav-item"><a href="#" class="sub-nav-link">Sub menu 2</a></li> <li class="sub-nav-item"><a href="#" class="sub-nav-link">Sub menu 3</a></li> </ul> </li> <li class="top-nav-item"> <a href="#" class="top-nav-link">Item 2</a> </li> </ul> <p>Lorem ipsum dolor sit amet. Sed umini. Lorem ipsum dolor sit amet. Sed umini. Lorem ipsum dolor sit amet. Sed umini. Lorem ipsum dolor sit amet. Sed umini. Lorem ipsum dolor sit amet. Sed umini. Lorem ipsum dolor sit amet. Sed umini.</p>