Вопросы макета для горизонтального ul с вложенным ul

Question

JS Fiddle here

У меня есть меню, требующее редизайна, включенное на нескольких разных сайтах, но с разными элементами на каждом. Невозможно изменить HTML на всех сайтах, поэтому я делаю только CSS, но я изо всех сил пытаюсь получить новый CSS, чтобы он соответствовал моим требованиям. HTML состоит из <ul>, а дочерние <li> могут иметь свои <ul>. Мне нужно:

1. Элементы в меню, которые должны отображаться горизонтально
2. Если выбранный пункт меню имеет подменю, это отображается ниже, но выровнено по левой стороне меню, не ниже родительского элемента
3. Высота контейнера div в соответствии с высотой его содержимого

Моя проблема заключается в том, чтобы получить оставленное подменю выровненный мне нужно установить абсолютное положение и влево на 0 (или использовать float left). Однако, если я сделаю одно из этих действий, то height: auto на родительском элементе больше не будет содержать подменю. Я не могу установить фиксированную высоту, так как иногда подменю существует, а иногда нет.

Мое запасное решение, вероятно, будет использовать JavaScript, но я бы предпочел этого избежать, если это возможно.

ul{
  list-style: none;
  line-height: 2em;
  padding-left: 0;
}
    
li{
  display: inline-block;
  padding: 0.2em;
}
    
.menu-container{
  position: relative;
  width: 100%;
  background-color: lightblue;
  height: auto;
}
    
.opened-menu span {
  text-decoration: underline;
}
    
.top-menu {
  position: relative;
  border-bottom: 1px solid #d3d3d3;
  width: 100%;
}
    
.sub-menu {
  position: absolute;
  left: 0;
}

<div class="menu-container">
  <ul class="top-menu">
    <li>item 1</li>
    <li class="opened-menu">
      <span>item 2</span>
      <ul class="sub-menu">
        <li>submenu 1</li>
        <li>submenu 1</li>
      </ul>
    </li>
    <li>item 3</li>
  </ul>
</div>
<div>
  Here is some more content
</div>