Как избавиться от лишнего места в раскрывающемся меню? ⇐ CSS

[Anonymous]

Я пытаюсь создать коммерческий веб-сайт с нуля, будучи новичком, и в настоящее время просматриваю руководство на YouTube, чтобы получить помощь. Я полностью завершил эту функцию, но последние несколько дней столкнулся с проблемой, которая меня немного расстраивала, поскольку я не знаю, что ее вызывает:
Отбросить Нижнее меню
Рядом с параметрами переключения языка появилось дополнительное пространство. Там есть все это ненужное пространство, которое мне не нужно и не нужно. Это произошло после того, как я использовал display:block, поэтому я предполагаю, что это как-то связано с проблемой, с которой я столкнулся.

Код: Выделить всё

 China Goods 
[*]






[list]

  Home 
[*]  Sign Up 
[*]  Shopping Cart 

[*]  Language 



[*]  English 
[*]  Chinese 
[*]  Japanese 



[/list]

Код: Выделить всё

* {
margin: 0px;
padding: 0px;

}

body{

margin: 0px;

}

.navBar ul{

list-style-type: none;
background-color: hsl(0, 0% , 25%) ;
padding: 0px;
margin: 0px;
overflow: hidden;

width: max-content;

display: flex;

justify-content: flex-start;

position: relative;

left: 800px;

top: 50px;

}

.navBar a{

color: white;
text-decoration: none ;
padding: 15px;
display: block;
text-align: center;

}

.navBar a:hover{

background-color: hsl(0, 84%, 47%);

}

.navBar li{

float: center;

}

/* Impacts the Language Bar */
.languageBar .languageContent{
display:none;

}

.languageBar:hover .languageContent{

}

Я попытался использовать Display: flex и float:left вместе с overflow:hidden, чтобы избавиться от этого лишнего пространства, но ничего не вышло. Также была предпринята попытка установить высоту строки, но это изменило только высоту текста и не избавило от нежелательного пространства.

Подробнее здесь: https://stackoverflow.com/questions/786 ... pdown-menu