Строка меню в стиле HTML/CSS неправильно оформлена

Question

Я работаю над веб-сайтом как часть средства ревизии, однако, похоже, я не могу правильно настроить макет своего меню при попытке создания выпадающих списков для нескольких разделов на в том же списке они либо появляются друг на друга, либо макет в сторону того, где они должны быть, отметим, что решение должно использовать только HTML и CSS.

Чтобы уточнить, выпадающие списки должны отображаться под их «заголовком заголовка», так сказать.

#menu a:link { 
 
    color: #C7C1C1; 
 
    text-decoration: none; 
 
} 
 
#menu a:visited { 
 
    color: #C7C1C1; 
 
    text-decoration: none; 
 
} 
 
#menu a:hover { 
 
    color: #FFFFFF; 
 
} 
 
#menu { 
 
    text-align: center; 
 
    top: 0px; 
 
    position: absolute; 
 
    margin-bottom: -61px; 
 
    font-size: 20px; 
 
} 
 
#menu ul {} #menu ul li { 
 
    display: inline; 
 
    padding-left: 30px; 
 
    padding-right: 30px; 
 
} 
 
#menu ul li ul { 
 
    display: none; 
 
} 
 
#menu ul li:hover ul { 
 
    display: inline-block; 
 
    top: 50px; 
 
    left: 
 
    /*when applying this makes all dropdowns stack*/ 
 
    ; 
 
    position: absolute; 
 
    background-color: #4D4D4D; 
 
    text-align: center; 
 
}

<div id="menu"> 
 
    <div> 
 
    <ul> 
 
     <li><a href="#x">Introduction</a> 
 
     <ul> 
 
      <li><a href="#xxx">Past</a> 
 
      </li> 
 
      <li><a href="#xxx">Present</a> 
 
      </li> 
 
      <li><a href="#xxx">Future</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#y">History</a> 
 
     <ul> 
 
      <li><a href="#yyy">Past</a> 
 
      </li> 
 
      <li><a href="#yyy">Present</a> 
 
      </li> 
 
      <li><a href="#yyy">Future</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#z">National Flags</a> 
 
     <ul> 
 
      <li><a href="#zzz">Past</a> 
 
      </li> 
 
      <li><a href="#zzz">Present</a> 
 
      </li> 
 
      <li><a href="#zzz">Future</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#a">International Maritime Signal Flags</a> 
 
     <ul> 
 
      <li><a href="#aaa">Past</a> 
 
      </li> 
 
      <li><a href="#aaa">Present</a> 
 
      </li> 
 
      <li><a href="#aaa">Future</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 1

Вам нужно добавить position: relative; к родительскому элементу, чтобы поместить ребенка абсолютного к нему:

#menu ul li{ 
    display:   inline; 
    padding-left:  30px; 
    padding-right:  30px; 
    position: relative; // IMPORTANT 
} 

и вы должны добавить только display: inline-block свойство в парении #menu ul li: hover ul и остальной частью стиля в обычном определении класса: (только для удобства)

#menu ul li ul{ 
    display:   none; 
    top:    50px; 
    position:   absolute; 
    background-color: #4D4D4D;  
    text-align:   center; 
    width: 100%; 
} 

Answer 2

Установите position: relative; в <li>

#menu ul li{ 
    display:   inline; 
    padding-left:  30px; 
    padding-right:  30px; 
    position: relative; // add this 
} 

А затем установить left: 0; позицию <ul>

#menu ul li:hover ul{ 
    display:   inline-block; 
    top:    50px; 
    left:    0px; // Begin on the left of the li 
    position:   absolute; 
    background-color: #4D4D4D;  
    text-align:   center; 
}