绝对定位的孩子的顶边固定在其父母的底部边缘，其高度未知？

Question

根据标题，希望尽管是一口一口就能理解。只是为了更清楚地说明一下：

这是下拉菜单系统的一部分。我想要一个子菜单直接出现在父列表项下。这是我的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> 

顶级li元素是未知（动态）高度。我希望孩子ul直接出现在其父项下方，左边缘对齐，并且孩子的顶边固定在父项的底部边缘。

我已经写了几年的CSS，但意识到我不知道如何做到这一点，或者如果有可能......任何想法？谢谢。

编辑

我所要求的-logically-是非常简单的。问题在于标题，也许我通过谈论我遇到过的具体情况来淹没水域。这是问题的一个多简单的例子：

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

我要坚持的绿色框底部的紫色框的顶部边缘，而绿色盒子的高度是动态的。雅挖？

Answer 1

这通常对我来说...但没有你的 CSS很难确定它会在你的实例中工作。

li { 
position:relative; 
} 

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

Answer 2

请注意，您不能嵌套锚标记。因此，这是一个使用有效HTML的解决方案。注意标记更改。

通过使用绝对位置，但不设置左边或顶部，你有一个subnav直接在它之前的块级元素之下。

（我也有，我已经添加为我的解决方案的jsFiddle version链接的访问的解决方案。）

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>