Адаптивный веб-сайт — подменю, не расширяется в пространство между меню верхнего уровня. ⇐ CSS

[Anonymous]

Я новичок в создании веб-сайтов html/css, но я создал шаблон с навигацией и эффектами наведения. Он отлично работает при просмотре на компьютере или планшете. На мобильном телефоне у меня есть значок меню-гамбургера, при нажатии на который меню отображается в виде вертикального списка. Названия меню верхнего уровня отображаются нормально, но при наведении на них курсора, чтобы отобразить элементы подменю, я не могу получить правильный код, поэтому пространство между каждым именем меню верхнего уровня расширяется, чтобы затем соответствовать вертикальному списку подменю между ними. Кажется, оно накладывается на меню верхнего уровня (см. скриншот, который я прикрепил). Скриншот для просмотра на мобильных устройствах
Мне не удалось это решить, поэтому буду с благодарностью принимать любые подсказки.Я включил HTML и CSS ниже, поэтому прошу прощения за длину.
index.html

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

[url=index.html]
[img]images/logo/world-war-2-logo.webp[/img]
 [/url]



[img]images/icons/menu/close.webp[/img]
[list]
[*][url=index.html]Home[/url]
[*][url=#]The Road to War[/url]
[*][url=#]Eastern Europe[/url]


[url=#]Invasion of Poland[/url]
[*][url=#]Winter War[/url]
[*][url=#]Barbarossa[/url]
[*][url=#]Typhoon[/url]
[/list]


[*][url=#]Western Europe[/url]

[list]
[url=#]Phoney War[/url]
[*][url=#]Denmark and Norway[/url]
[*][url=#]Low Countries[/url]
[*][url=#]Battle of France[/url]
[/list]


[*][url=#]Italy and the Balkans[/url]

[list]
[url=#]Greece Attacked[/url]
[*][url=#]Invasion of Yugloslavia[/url]
[*][url=#]Greece Overcome[/url]
[/list]


[*][url=#]North Africa[/url]

[list]
[url=#]Italy Advances[/url]
[*][url=#]British Reposte[/url]
[*][url=#]Enter Rommel[/url]
[/list]


[*][url=#]Battle of the Atlantic[/url]

[list]
[url=#]Bottled Up[/url]
[*][url=#]1st Happy Time[/url]
[*][url=#]2nd Happy Time[/url]
[/list]





[img]images/icons/menu/menu.webp[/img]

CSS

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

* {
margin: 0;
padding: 0;
font-family: "Alumni Sans", sans-serif;
}

/* Header Section */
.header {
min-height: 100vh;
width: 100%;
background-image: linear-gradient(rgba(0,0,0,0.25),#999393),url(images/hero-photo/a-world-at-war-cover-d-1040-l85.webp);
background-position: center;
background-size: cover;
position: relative;
}
/* Navigation Bar */
nav {
display: flex;
padding: 1% 3%;
justify-content: space-between;
align-items: center;
}
/* Website Logo Image Inside Navigation Bar */
nav img{
width: 175px;
}
.nav-menu-links{
flex: 1;
text-align: right;

}
.nav-menu-links ul li{
list-style: none;
display: inline-block;
padding: 8px 12px;
position:relative;
}
.nav-menu-links ul li a {
color: #fff;
text-decoration: none;
font-family: "Amatic SC", sans-serif;
font-size: 20px;
font-style: normal;
font-weight: 700;
}
.nav-menu-links ul li::after{
content: '';
width: 0%;
height: 2px;
background: #f44336;
display: block;
margin: auto;
transition: 0.5s;
}
.nav-menu-links ul li:hover::after{
width: 100%;
}
/* Hide Sub Menu being displayed until Hovered on */
.sub-menu-1{
display: none;
}
/* Display Sub Menu when Hovered on */
.nav-menu-links ul li:hover .sub-menu-1 {
display: block;
position: absolute;
margin-top: 5px;
margin-left: -15px;
width: fit-content;

}
/* Sub Menu1 UL  */
.nav-menu-links ul li:hover .sub-menu-1 ul {
margin: 10px;
background: rgba(0,0,0,0.25);
text-align: left;
}
.nav-menu-links ul li:hover .sub-menu-1 ul li {
padding: 10px;
transition: 0.5s;
border-bottom: 1px dashed #fff;
width: fit-content;
white-space: nowrap;
position: relative
}
.nav-menu-links ul li:hover .sub-menu-1 ul li:last-child {
border-bottom: none;
}
.text-box {
width: 90%;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
.text-box h1 {
font-size: 75px;
font-family: "Amatic SC", sans-serif;
font-weight: 700;
}
.text-box p {
margin: 10px 0 40px;
font-size: 40px;
color: #fff;
font-family: "Amatic SC", sans-serif;
font-weight: 400;
}
.hero-buttons a{
font-size: 20px;
font-family: "Amatic SC", sans-serif;
font-weight: 700;
}
.hero-button1{
width: 150px;
display: inline-block;
text-decoration: none;
color: #fff;
border: 1px solid #fff;
padding: 12px 0px;
margin: 0 3px;
font-size: 13px;
background: transparent;
position: relative;
cursor: pointer;
}
.hero-button1:hover {
border: 1px solid #fff;
background: #f44336;
transition: 0.5s;
}
.hero-button2 {
width: 150px;
display: inline-block;
text-decoration: none;
color: #fff;
border: 1px solid #fff;
padding: 12px 0px;
margin: 0 3px;
font-size: 13px;
background: #f44336;
position: relative;
cursor: pointer;
}

.hero-button2:hover {
border: 1px solid #f44336;
background: #f44336;
transition: 0.5s;
}
.hero-button3 {
width: 150px;
display: inline-block;
text-decoration: none;
color: #fff;
border: 1px solid #fff;
padding: 12px 0px;
margin: 0 3px;
font-size: 13px;
background: transparent;
position: relative;
cursor: pointer;
}

.hero-button3:hover {
border: 1px solid #fff;
background: #f44336;
transition: 0.5s;
}
.quote-text-box {
width: 90%;
color: #fff;
position: absolute;
top: 85%;
left: 50%;
transform: translate(-50%,-50%);
text-align:  center;
}

.quote-text-box h1 {
font-size: 25px;
font-family: "Amatic SC", sans-serif;
font-weight: 700;
}

.quote-text-box p {
margin: 10px 0 10px;
font-size: 20px;
color: #fff;
font-family: "Amatic SC", sans-serif;
font-weight: 400;
}
.introduction{
background: #fff;
width: auto;
padding: 5px 5px 5px 5px;
}
.introduction h1 {
font-size: 20px;
font-family: "Amatic SC", sans-serif;
font-weight: 700;
text-align: center;
text-decoration: underline;
}
.introduction p {
font-size: 17px;
color: #000000;
font-family: "Alumni Sans", sans-serif;
font-weight: 400;
text-align: justify;
padding: 5px 5px 5px 5px;
line-height: 24px;
}
.introduction p::first-letter {
font-size: 25px;
font-weight: 400;
}
.bold {
font-weight: 700;
font-size: 17px;
font-family: "Alumni Sans", sans-serif;
}
.red {
font-weight: 400;
color: #f44336;
font-size: 17px;
font-family: "Alumni Sans", sans-serif;
}
.flags {
width: auto;
padding: 5px 0px 5px 0px;
}
.flags-row {
align-items: center;
justify-content: center;
display: flex;
flex-wrap: wrap;
padding: 5px 0px 5px 0px;
}
.flags-column {
box-sizing: border-box;
padding: 0px 5px 0px 5px;
}
.flags-column img {
border: 1px solid #808080;
border-radius: 5px;
}
.medals {
width: auto;
padding: 5px 5px 5px 5px;
}
.medals-row {
display: flex;
align-items: center;
justify-content: space-around;
}
.medals-column{
box-sizing: border-box;
}
.copyright {
background: #808080;
width: auto;
padding: 5px 5px 5px 5px;
margin: auto;
}
.copyright p {
font-size: 17px;
color: #fff;
font-family: "Alumni Sans", sans-serif;
font-weight: 400;
text-align: center;
}

/* Viewport of 700px Max */
@media(max-width: 700px) {
/* Website Logo Image Inside Navigation Bar */
nav img {
width: 125px;
}

.text-box h1 {
font-size: 40px;
}

.text-box p {
font-size: 25px;
}

.nav-menu-links {
position: absolute;
background: rgba(0,0,0,0.75);
height: 100vh;
width: 100%;
top: 0;
right: -100%;
text-align: left;
z-index: 2;
transition: 1s;
white-space: nowrap;
background-color: red;
}
.nav-menu-links ul {
padding: 30px;
}

.nav-menu-links ul li{
display: flex;

}

.nav-menu {
margin: 10px;
cursor: pointer;
width: auto;
}
/* Start Sub Menu Expands down */
.main-menu-item {

}
.main-menu-item {

}

.main-menu-item-with-submenu {

}

.sub-menu-1 {
height: auto;
}
.sub-menu-1-item {
list-style-type: none;

}

/* End Sub Menu Expands down */
.hero-button1 {
width: 100px;
}
.hero-button2 {
width: 100px;
}
.hero-button3 {
width: 100px;
}
.flags-column img {
width: 48px;
height: 29px;
}
.medals-column img{
width: 45px;
height: 88px;
}
}
/* Viewport greater than 701px, but less that 1024px */
@media(min-width: 701px) {
.text-box h1 {
font-size: 55px;
}

.text-box p {
font-size: 32px;
}
/* Hamburger and X buttons hide */
.nav-menu {
display: none;
}
.hero-button1 {
width: 125px;
}
.hero-button2 {
width: 125px;
}
.hero-button3 {
width: 125px;
}
.flags-column img {
width: 60px;
height: 36px;
}
.medals-column img {
width: 80px;
height: 156px;
}
}
/* Viewport greater than 1024px */
@media(min-width: 1024px) {
.text-box h1 {
font-size: 75px;
}

.text-box p {
font-size: 40px;
}
/* Hamburger and X buttons hide */
.nav-menu {
display: none;
}
.hero-button1 {
width: 150px;
}
.hero-button2 {
width: 150px;
}
.hero-button3 {
width: 150px;
}
.flags-column img {
width: 80px;
height: 48px;
}
.medals-column img {
width: 120px;
height: 234px;
}
}

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

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