В навигационном меню (HTML/CSS) в качестве одного из раскрывающихся списков используется «Мегаменю». Отлично работает в ⇐ CSS

[Anonymous]

Я работал над навигационным меню этого сайта несколько недель и застрял. В полноэкранном режиме все работает нормально, но возникают проблемы, когда я изменяю размер браузера для проверки отзывчивости. В частности, когда появляется подменю кнопки «Дирекция», оно толкает другие кнопки вниз, создавая промежуток, равный высоте мегаменю, которое открывается при наведении курсора. Этого не происходит с другими кнопками, которые имеют разные классы/стили. Я подозреваю, что это связано со столбцами Мега-меню или другим свойством, специфичным для Мега-меню, которое я использую на этой кнопке. Я испробовал все имеющиеся у меня ресурсы; школьные заметки, GPT, W3resources, экспериментировал с различными комбинациями «абсолютных» и «относительных» позиций, а также свойств отображения, но безуспешно. Любая помощь будет принята с благодарностью. Спасибо, что нашли время прочитать!


[img]https: //i.sstatic.net/21UzKvM6.jpg[/img]

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

* {
box-sizing: border-box;
}

body {
margin: 0;
}

/* ------------------------------------- MAIN Navbar container ----------------------------------- */
.navbar {
position: relative;
background-color: #1b1b1b;
font-family: Arial, Helvetica, sans-serif;
display: flex;
align-items: center;
flex-wrap: wrap;
}

/* Clear floats */
.navbar::after {
content: "";
clear: both;
display: table;
}

/* ----------------------- Home House-Icon (and its Link) Styles  ------------------------------ */

/* Home icon-Link styling */
.navbar__home-link {
float: left;
font-size: 18px;
color: rgb(225, 225, 225);
padding: 0 20px;
text-decoration: none;
height: 60px;
display: flex;
align-items: center;
}

/* Home icon styling */
.navbar__home-icon {
float: left;
text-align: center;
padding: 0 10px 0 0;
text-decoration: none;
width: 60px;
height: 60px;
display: flex;
align-items: center;
fill: rgb(225, 225, 225);
}

/* Home icon hover styling */
.navbar__home-icon:hover {
background-color: rgb(85, 83, 83);
}

/* ----------- Main Navigation Menu Buttons And Dropdown Menu Containers  ----------------- */

/* The dropdown menu container for the Mega menu (4 columns) - Used for "Directorate" button*/
.navbar__dropdown--mega {
float: left;
overflow: hidden;
}

/* The dropdown menu container for the Regular menu (Single column) - Used for the all the other buttons (Not the "Directorate" button) */
.dropdown__normal {
float: left;
position: relative;
}

/* Styles for the dropdown trigger buttons that are on the navigation bar.  they are applied when used inside .navbar__dropdown--mega or .dropdown-normal containers */
.navbar__dropdown--mega .dropbtn,
.dropdown__normal .dropbtn {
font-size: 17.5px;
font-family: Arial, Helvetica, sans-serif;
border: none;
outline: none;
color: rgb(225, 225, 225);
padding: 0 20px;
background-color: inherit;
margin: 0;
height: 60px;
display: flex;
align-items: center;
transition: background-color 0.3s ease;
}

/* Hover style for navbar buttons */
.navbar a:hover,  /* Hover style for navbar home Icon since its used as a link */
.navbar__dropdown--mega:hover .dropbtn, /* Hover style for "Directorate" button*/
.dropdown__normal:hover .dropbtn {       /* Hover style for the rest of the buttons on the nav bar*/
background-color: rgb(85, 83, 83);
color: white;
}

/* Links inside the normal dropdown */
.dropdown__content-normal a {
float: none;
color: black;
padding: 10px;
text-decoration: none;
display: block;
text-align: left;
}

/* Add a background color on hover */
.dropdown__content-normal a:hover {
background-color: #9b0b0b;
}

/* Dropdown content (hidden by default) */
.dropdown__content-mega,
.dropdown__content-normal {
display: none;
position: absolute;
background-color: #ffffff;
padding: 12px;
box-shadow: 0px 8px 16px 0px rgba(119, 7, 7, 0.664);
z-index: 1;
}

/* Show the Mega dropdown menu on hover */
.navbar__dropdown--mega:hover .dropdown__content-mega{
display: block;
}

/* Show the Normal dropdown menu on hover */
.dropdown__normal:hover .dropdown__content-normal {
display: block;
}

/* ----------- MEGA MENU: Styles for Mega Dropdown Menu, its Columns, and its Links ------------- */

.dropdown__content-mega {
width: 100%;
left: 0;
}

/* Create columns for the mega menu */
.column {
float: left;
width: 25%;  /* Four equal columns */
padding: 10px 10px 10px 50px;
background-color: #ffffff;
height: 550px;
border-right: 3px solid #d3d0d054;
}

/* Style links inside the columns */
.column a {
float: none;
color: black;
padding: 5px;
text-decoration: none;
display: block;
text-align: left;
}

/* Style for the column headers */
.column-header {
display: block;
font-size: 16px;
font-weight: bold;
color: black;
padding: 8px 0;
}

/* Add a background color on hover for links except headers */
.column a:not(.column-header):hover {
background-color: #9b0b0b;
color: white;
}

/* Header hover effect */
.column-header:hover {
color: #9b0b0b;
}

/* Remove border from the last column */
.column:last-child {
border-right: none;
}

/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}

/* ----------------- SIMPLE MENU: Normal (single column) Dropdown Menu Styles -------------- */

/* Dropdown content (hidden by default) */
.dropdown__normal .dropdown__content-normal {
display: none;
position: absolute;
background-color: #ffffff;
padding: 16px;
min-width: 230px;
box-shadow: 0px 8px 16px 0px rgba(119, 7, 7, 0.664);
z-index: 1;
}

/* New class to float the "links" button to the right */

.dropdown-right {
margin-left: auto;
}

/* --------------------------------- Centered SOCSOUTH text -----------------------------------*/
.navbar__text {
position: absolute;
left: calc(50% + 10%);
top: 50%;
transform: translate(-50%, -50%);
font-size: 50px;
font-weight: bold;
color: rgba(255, 255, 255, 0.1);
pointer-events: none;
letter-spacing: 20px;
}

/* ------------- Responsive Design ********WHWRE I THINK THE ISSUE IS******* -------------------- */

@media (max-width: 768px) {
.navbar {
flex-direction: column;
align-items: flex-start;
}

/* Remove SOCSOUTH text on smaller screens */
.navbar__text {
display: none;
}

.navbar__home-icon {
order: 1;
}

/* Align menu buttons horizontally under the home icon */
.navbar__dropdown--mega,
.dropdown__normal {
order: 2;
position:relative;
float: none;
display: inline-flex;
}

.navbar__dropdown--mega .dropbtn,
.dropdown__normal .dropbtn {
font-size: 16px;
padding: 10px 5px;
height: 50px;
transition: background-color 0.3s ease;
}

/* Position dropdowns to open to the right on smaller screens only */
.dropdown__content-mega {
position: relative;
left: 0;
width: auto;

}

.dropdown__content-normal {
position: absolute;
left: 100%; /* Open to the right */
}

.column {
width: 100%;
height: auto;
border-right: none;
}

}

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

    



[url=#]



[/url]

SOUTH



Directorates





[url=#]Command Group[/url]
[url=#]Link 1[/url]
[url=#]Link 2[/url]
[url=#]Link 3[/url]
[url=#]Manpower and Personnel[/url]



[url=#]Intelligence[/url]
[url=#]Link 1[/url]
[url=#]Link 2[/url]
[url=#]Link 3[/url]



[url=#]Operations[/url]
[url=#]Current Ops[/url]
[url=#]Link 1[/url]
[url=#]Link 2[/url]
[url=#]Link 3[/url]
[url=#]Future Ops[/url]
[url=#]Link 1[/url]
[url=#]Link 2[/url]
[url=#]Link 3[/url]
[url=#]Training | Readiness | Exercise[/url]
[url=#]Information Operations[/url]
[url=#]Link 1[/url]
[url=#]Link 2[/url]
[url=#]Link 3[/url]



[url=#]Logistics[/url]
[url=#]Engineers[/url]
[url=#]Strategy | Plans | Policy[/url]
[url=#]Communications[/url]
[url=#]Field Technical Unit[/url]
[url=#]Cybersecurity[/url]
[url=#]Opes[/url]







Special Staff

[url=#]Link 1[/url]
[url=#]Link 2[/url]
[url=#]Link 3[/url]





Units

[url=#]Link 1[/url]
[url=#]Link 2[/url]
[url=#]Link 3[/url]





Quick Links | Support

Подробнее здесь: https://stackoverflow.com/questions/791 ... great-stan