絕對定位的孩子的頂邊固定在其父母的底部邊緣，其高度未知？

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>