Мобильная версияНа странице есть три текстовые области, которые я Кажется, я не могу сесть за меню, из-за чего некоторые пункты меню не отображают подменю при наведении курсора мыши. Я думаю, это связано с z-index.
Я пробовал добавлять теги Z-index, flex и Position в CSS, но у меня это не работает, мобильная навигация всегда находится ниже 3. текстовые разделы на странице.
Буду честен, я сейчас немного запутался и не знаю, как решить эту проблему.
Буду очень признателен за любую помощь
Я скопировал HTML и CSS ниже, чтобы вы могли воспроизвести то, что я вижу в браузере, если это поможет, поэтому извините, если скопировал слишком много.
HTML
World-War-2.org | World War 2 Timelines | 1939-1945
[*]
[*]
Western Europe
[*]
Italy and the Balkans
[*]
North Africa
[*]
Battle of the Atlantic
[*]
War for the Pacific
[*]
Western Europe
[*]
Italy and the Balkans
[*]
North Africa
[*]
Battle of the Atlantic
[*]
War for the Pacific
World-War-2.org
1939-1945 - A World at War
The Road to War
A World at War
Invasion of Poland
"This war no longer bears the characteristics of former inter-European conflicts. It is one of those elemental conflicts which ushers in a new millennium and which shake the world once in a thousand years."
Adolf Hitler
CSS для мобильной навигации
.nav-mobile {
display: flex;
padding: 1% 1% 1% 1%;
border: 1px solid rgb(0, 191, 255);
/*z-index: 99999;*/
}
/*.nav-mobile .logo{
align-items:center;
}*/
.nav-mobile-menu-links {
flex: 1;
border: 3px solid orange;
}
.nav-mobile .ul-mobile-upper-menu {
list-style: none;
display: flex;
justify-content: center;
margin: 0px 0px 0px -3px;
border: 3px solid pink;
flex-direction: column;
}
.nav-mobile .ul-mobile-lower-menu {
list-style: none;
display: flex;
justify-content: flex-start;
flex-wrap: nowrap; /*WRAPS MENU LINKS*/
margin: 0px 0px 0px -3px;
border: 3px solid pink;
flex-direction: column;
}
.nav-mobile ul li {
display: inline-block;
padding: 5px 6px 5px 6px;
margin: 0px 2px 0px 2px;
position: relative;
list-style: none;
}
.li-mobile-main-menu-item, .li-mobile-main-menu-item-with-submenu {
width: fit-content;
}
.nav-mobile a {
display: flex;
color: #fff;
font-family: "Amatic SC", sans-serif;
list-style: none;
}
.nav-mobile .a-mobile-main-menu-item {
font-size: 20px;
font-style: normal;
font-weight: 700;
list-style: none;
}
.a-mobile-main-menu-item-with-submenu {
font-size: 20px;
font-style: normal;
font-weight: 700;
list-style: none;
}
/* Main Menu Item Hover Effects Start */
.nav-mobile ul .li-mobile-main-menu-item::after {
content: '';
width: 0%;
height: 2px;
background: rgb(0, 191, 255);
display: block;
margin: auto;
transition: 0.5s;
}
.nav-mobile ul .li-mobile-main-menu-item:hover::after {
width: 100%;
}
.nav-mobile ul .a-mobile-main-menu-item:hover {
color: rgba(0, 191, 255);
}
/* Main Menu Item Hover Effects End */
/* Main Menu Item With Submenu Hover Effects Start */
.nav-mobile ul .li-mobile-main-menu-item-with-submenu::after {
content: '';
width: 0%;
height: 2px;
background: rgb(0, 191, 255);
display: block;
margin: auto;
transition: 0.5s;
}
.nav-mobile ul .li-mobile-main-menu-item-with-submenu:hover::after {
width: 100%;
}
/* Main Menu Item With Submenu Hover Effects End */
/* Hide Sub-Menu-1 being displayed until Hovered on */
.mobile-sub-menu-1 {
display: none;
}
/* SUB MENU 1 CONFIG */
/*.sub-menu-1 {
}*/
.ul-mobile-sub-menu-1 {
list-style: none;
display: flex;
flex-direction: column;
position: absolute;
background-color: rgb(0, 191, 255, 0.5);
left: 0;
top: 37px;
border-radius: 5px 5px;
padding: 4px 0px 4px 0px;
width: max-content;
}
.li-mobile-sub-menu-1-item {
position: relative;
list-style: none;
display: inline-block;
}
.a-mobile-sub-menu-1-item {
font-size: 16px;
font-style: normal;
font-weight: 700;
list-style: none;
}
/* Sub Menu 1 Hover Effects Start */
.nav-mobile ul .li-mobile-main-menu-item-with-submenu:hover .mobile-sub-menu-1 {
content: '';
width: 0%;
display: flex;
}
/* Creates a Dynamic underline after each Sub-Menu-1-item */
.li-mobile-sub-menu-1-item::after {
content: '';
width: 0%;
height: 2px;
background: #ffffff;
display: block;
margin: auto;
transition: 0.5s;
}
.li-mobile-sub-menu-1-item:hover::after {
width: 100%;
}
/*nav ul .li-main-menu-item-with-submenu:hover .sub-menu-1 {
transition: all 1.5s ease;
-webkit-transition: all 1.5s ease;
}*/
/* Changes the Parent Menu Name Color when Sub-menu-1-item is hovered on */
.li-mobile-sub-menu-1-item.active.parent > a, .li-mobile-main-menu-item-with-submenu:hover > a {
color: rgb(0, 191, 255);
}
/* Sub Menu 1 Hover Effects End */
/* Hamburger Start */
.hamburger {
position: relative;
display: block;
width: 35px;
cursor: pointer;
appearance: none;
background: none;
outline: none;
border: none;
top: 15px;
left: 15px;
}
.hamburger .bar, .hamburger::after, .hamburger::before {
content: '';
display: block;
width: 100%;
height: 5px;
background-color: #fff;
margin: 6px 0px;
transition: 0.5s;
border-radius: 5px 5px 5px 5px;
}
.hamburger.is-active::before {
transform: rotate(-45deg) translate(-8px, 6px);
}
.hamburger.is-active::after {
transform: rotate(45deg) translate(-9px, -8px);
}
.hamburger.is-active .bar {
opacity: 0;
}
.nav-mobile {
position: absolute;
right: -100%;
/*left: 100%;*/
top: 0;
width: 35%;
min-height: 100%;
height: fit-content;
display: block;
z-index: 98;
background-color: rgba(0,0,0,0.35);
backdrop-filter:blur(5px) contrast(0.8);
transition: 1s;
/*margin-top:20%;*/
}
.nav-mobile.is-active {
/*left:70%;*/
right: 0;
}
CSS для панели навигации рабочего стола
/* Header Desktop Nav Section */
.container[data-type="headercontainer"] {
height: 100vh;
max-width: 1140px;
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-size: cover;
background-position: center;
margin: auto;
/*overflow-x: hidden;*/
position: relative;
container-type: inline-size;
}
.nav-desktop {
display: flex;
padding: 1% 1%;
justify-content: space-around;
align-items:center;
}
/* Logo */
nav .logo {
width: 175px;
}
.nav-desktop-menu-links {
flex: 1;
/*text-align: right;*/
}
nav .ul-desktop-upper-menu {
/*max-width:contain;*/
list-style: none;
display: flex;
justify-content: flex-start;
flex-wrap: nowrap; /*WRAPS MENU LINKS*/
margin: 0px 0px 0px -3px;
}
nav .ul-desktop-lower-menu {
/*max-width:contain;*/
list-style: none;
display: flex;
justify-content: flex-start;
flex-wrap: nowrap; /*WRAPS MENU LINKS*/
margin: 0px 0px 0px -3px;
}
nav ul li {
display: inline-block;
padding: 5px 6px 5px 6px;
margin: 0px 2px 0px 2px;
position: relative;
list-style: none;
}
.li-desktop-main-menu-item, .li-desktop-main-menu-item-with-submenu {
/*background-color: rgba(255,255,255,0.25);
border-radius: 5px 5px;*/
}
nav a {
/*height: 90%;*/
display: flex;
color: #fff;
font-family: "Amatic SC", sans-serif;
/*text-align:justify;*/
/*padding: 0 30px;*/
list-style: none;
}
nav .a-desktop-main-menu-item {
/*height: 90%;*/
font-size: 20px;
font-style: normal;
font-weight: 700;
list-style: none;
}
.a-desktop-main-menu-item-with-submenu {
/*height: 80%;*/
font-size: 20px;
font-style: normal;
font-weight: 700;
list-style: none;
}
/* Main Menu Item Hover Effects Start */
nav ul .li-desktop-main-menu-item::after {
content: '';
width: 0%;
height: 2px;
background: rgb(0, 191, 255);
display: block;
margin: auto;
transition: 0.5s;
}
nav ul .li-desktop-main-menu-item:hover::after {
width: 100%;
}
nav ul .a-desktop-main-menu-item:hover {
color: rgba(0, 191, 255);
}
/* Main Menu Item Hover Effects End */
/* Main Menu Item With Submenu Hover Effects Start */
nav ul .li-desktop-main-menu-item-with-submenu::after {
content: '';
width: 0%;
height: 2px;
background: rgb(0, 191, 255);
display: block;
margin: auto;
transition: 0.5s;
}
nav ul .li-desktop-main-menu-item-with-submenu:hover::after {
width: 100%;
}
/* Main Menu Item With Submenu Hover Effects End */
/* Hide Sub-Menu-1 being displayed until Hovered on */
.desktop-sub-menu-1 {
display: none;
}
/* SUB MENU 1 CONFIG */
.desktop-sub-menu-1 {
/*transition: transform ease-in-out 3s;*/
}
.ul-desktop-sub-menu-1 {
list-style: none;
display: flex;
flex-direction: column;
position: absolute;
background-color: rgb(0, 191, 255, 0.5);
left: 0;
top: 37px;
border-radius: 5px 5px;
padding: 4px 0px 4px 0px;
width: max-content;
/*transition: transform ease-in-out 1s;*/
}
.li-desktop-sub-menu-1-item {
position: relative;
list-style: none;
display: inline-block; /*SUGGESTED FIX*/
}
.a-desktop-sub-menu-1-item {
font-size: 16px;
font-style: normal;
font-weight: 700;
list-style: none;
}
/* Sub Menu 1 Hover Effects Start */
nav ul .li-desktop-main-menu-item-with-submenu:hover .desktop-sub-menu-1 {
content: '';
width: 0%;
/*height: 0px;*/
/* background: #ffffff;*/
display: flex;
transition: all 1.5s ease;
-webkit-transition: all 1.5s ease;
}
/* Creates a Dynamic Line after each Sub-Menu-1-item */
.li-desktop-sub-menu-1-item::after {
content: '';
width: 0%;
height: 2px;
background: #ffffff;
display: block;
margin: auto;
transition: 0.5s;
}
.li-desktop-sub-menu-1-item:hover::after {
width: 100%;
}
/*nav ul .li-main-menu-item-with-submenu:hover .sub-menu-1 {
transition: all 1.5s ease;
-webkit-transition: all 1.5s ease;
}*/
/* Changes the Parent Menu Name Color when Sub-menu-1-item is hovered on */
.li-desktop-sub-menu-1-item.active.parent > a, .li-desktop-main-menu-item-with-submenu:hover > a {
color: rgb(0, 191, 255);
}
/* Sub Menu 1 Hover Effects End */
CSS для основной таблицы стилей
/*----------Cover Section-----------*/
.cover-overlay {
display: flex;
}
.container[data-type="covertitlecontainer"] {
width: 90%;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
.cover-website-title {
font-size: 75px;
font-family: "Amatic SC", sans-serif;
font-weight: 700;
color: #fff;
}
.cover-page-title {
margin: 10px 0 40px;
font-size: 40px;
color: #fff;
font-family: "Amatic SC", sans-serif;
font-weight: 400;
}
.container[data-type="coverherobuttonscontainer"] {
width: 90%;
color: #fff;
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
.hero-button1, .hero-button2, .hero-button3{
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: rgb(0, 191, 255);
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: rgb(0, 191, 255);
position: relative;
cursor: pointer;
}
.hero-button2:hover {
border: 1px solid rgb(0, 191, 255);
background: rgb(0, 191, 255);
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: rgb(0, 191, 255);
transition: 0.5s;
}
.container[data-type="coverquotecontainer"] {
width: 1000px;
color: #fff;
position: absolute;
top: 90%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
.cover-quote-leader {
font-size: 25px;
font-family: "Amatic SC", sans-serif;
font-weight: 700;
color: #fff
}
.cover-quote {
margin: 10px 0 10px;
font-size: 20px;
color: #fff;
font-family: "Amatic SC", sans-serif;
font-weight: 400;
}
CSS для настройки рабочего стола
/* Viewport greater than 1024px */
@media(min-width: 1024px) {
/* Hides Mobile Navigation Menu */
.nav-mobile {
display: none;
}
.hamburger {
display: none;
}
/*----------Cover Section-----------*/
.cover-website-title {
font-size: 75px;
}
.cover-page-title {
font-size: 40px;
}
.hero-button1 {
width: 150px;
}
.hero-button2 {
width: 150px;
}
.hero-button3 {
width: 150px;
}
}
CSS для настройки мобильных устройств
/* Viewport of 767px Max */
@media(max-width: 767px) {
/* Hides Desktop Navigation Menu */
.nav-desktop {
display: none;
}
/* Logo Size */
.mobile-logo {
width: 125px;
}
/*----------Cover Section-----------*/
.cover-website-title {
font-size: 40px;
}
.cover-page-title {
font-size: 25px;
}
.container[data-type="coverquotecontainer"] {
width: 90%;
}
.hero-button1 {
width: 100px;
}
.hero-button2 {
width: 100px;
}
.hero-button3 {
width: 100px;
}
}
Подробнее здесь: https://stackoverflow.com/questions/786 ... ge-content
