Unable to align UL beneath parent p

Question

Here's my plunker: http://plnkr.co/edit/0srpOqyv5o6V8NhSzhSA?p=preview

If you click on the word Location, the <ul> element is shown

I am struggling to align a <ul> element underneath its parent <p> tag.

The <ul> appears to always appear on the left (i know the position is absolute).

HTML:

 <div class="section-dropdown">
     <p>It is a
         <div class="dropdown-heading" ng-click="Location = !Location">
             Location
         </div>
         <ul ng-show="Location" class="dropdown-details">
             <li>Italy</li>
             <li>Spain</li>
             <li>Greece</li>
             <li>USA</li>
          </ul>
     </p>
 </div>

Answer 1

Remove position:absolute; It's collapsing unto itself rather than expanding the full width when you do that so it can't center the text within itself.

Answer 2

As has already been established, when you position the <ul> absolutely it is removed from the flow of the document, meaning it is positioned outside of the containing element. You can force the <ul> to position itself in relation to one of the parent elements by giving a parent position: relative;. You may then also need to add overflow: visible; to see any part of the <ul> that might overflow the parent.

Now that the <ul> is relative to the container you can position it accordingly, for instance:

.dropdown-details {
  top: 155px;
  left: 50%;
}

If you want the absolutely positioned <ul> to then be horizontally centered like the rest of the content, there is a little trick you can use (see https://stackoverflow.com/a/1777282/2126792).

---

Here is your adjusted plunker.

I fixed the HTML and added a wrapper around the <ul>:

<div class="section-dropdown">
  <p>It is a
    <span class="dropdown-heading" ng-click="Location = !Location">Location</span>
  </p>
  <div class="dropdown-details">
    <ul ng-show="Location">
      <li>Italy</li>
      <li>Spain</li>
      <li>Greece</li>
      <li>USA</li>
    </ul>
  </div>
</div>

And then positioned it in relation to the .grid-wrap div:

.grid-wrap {
  position: relative;
  overflow: visible;
}
.dropdown-details {
  top: 155px;
  left: 50%;
}
.dropdown-details ul {
  position: relative; left: -50%;
  border: 1px dashed #ef8e80;
  padding: 9px;
  background: #ffffff;
}