Drop Down Alignment

Question

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

Я экспериментировал с несколькими различными методами, и до сих пор наиболее обнадеживающим кажется, что значение «left:» задается необходимым процентом.

Это вызывает еще одну проблему: Проблема: когда я устанавливаю левое значение, я получаю пустую пустую область справа от элемента, от которого я не могу избавиться. Невозможно получить ширину.

код находится здесь: https://jsfiddle.net/c6mz3t08/5/

HTML

<div id="navbar-top"> 
    <ul class="horizontal"> 
     <li>Home</li> 
     <li>About 
      <ul>      
       <li>Menu 1</li> 
       <li>Menu 2</li> 
      </ul> 
     </li> 
     <li>Header</li> 
     <li>Header</li> 
     <li>Header</li> 
    </ul> 

CSS для выпадающего списка

.horizontal li ul { 
opacity:0; 
visibility:hidden; 
text-align:left; 
position:absolute; 
top:50px; 
left:-38%; //end up with blank space on right? 
} 

.horizontal li ul li { 
position:relative; 
background-color:#BBB; 
display:block; 
width:100%; 
} 

Кажется, проблема выравнивания происходит потому, что <ul> начинается после слова "О" во втором <li>.

Answer 1

a.) Для позиционирования отрегулируйте параметр left в .horizontal li ul (-39px, похоже, хорошо работает).

б.) Для ширины подменю регулировки параметра width в .horizontal li ul li (70px работал хорошо здесь, но зависит от содержания)

Answer 2

Не раздумывайте на left. Причина, по которой она сдвигается вправо, связана с тем, что ul по умолчанию имеет отступы.

Установка отступов на 0 и слева на 0 исправит это.

Пространство справа добавлено, потому что вы устанавливаете ширину на 100%. Если вы удалите ширину, она будет соответствовать его контейнеру. Но это может быть не то, что вы хотите, потому что текст будет завершен, может быть, лучше установить на нем white-space:nowrap.

.horizontal li ul { 
    opacity:0; 
    visibility:hidden; 
    text-align:left; 
    position:absolute; 
    top:50px; 
    padding:0; 
    left:0; //using the LEFT parameter to get it in to alignment--end up with "blank" space on right? 
} 

.horizontal li ul li { 
    position:relative; 
    background-color:#BBB; 
    display:block; 
    white-space:nowrap; 
} 

Обновлено демо на https://jsfiddle.net/c6mz3t08/6/