Hostinger Nav Bar не отображается правильно ⇐ CSS

[Anonymous]

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Arial', sans-serif;
color: #333;
line-height: 1.6;
background-color: #f4f4f9;
}

a {
text-decoration: none;
color: inherit;
}

ul {
list-style: none;
}

/* Header styles */
.main-header {
background: #0d47a1;
color: white;
padding: 1rem 0;
position: relative;
z-index: 1000;
}

.main-header .container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}

.main-header .logo {
font-size: 1.8rem;
font-weight: bold;
}

.menu-toggle {
display: none;
}

.menu-label {
display: none;
font-size: 2rem;
color: white;
cursor: pointer;
}

.nav-menu {
display: flex;
flex-direction: row;
}

.main-header .nav-links {
display: flex;
gap: 1.5rem;
position: relative;
}

.main-header .nav-links li {
position: relative;
}

.main-header .nav-links a {
color: white;
font-size: 1rem;
transition: color 0.3s ease;
padding: 0.5rem 1rem;
display: inline-block;
}

.main-header .nav-links a:hover {
color: #683bff;
}

/* Dropdown Menu */
.dropdown-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #0d47a1;
border-radius: 8px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
z-index: 1000;
min-width: 150px;
padding: 0.5rem 0;
}

.dropdown-menu li {
margin: 0;
}

.dropdown-menu a {
color: white;
padding: 0.5rem 1rem;
display: block;
text-decoration: none;
transition: background-color 0.3s ease;
}

.dropdown-menu a:hover {
background: #003c8f;
}

/* Show dropdown on hover */
.nav-links li.dropdown:hover .dropdown-menu {
display: block;
}

/* Responsive Design */
@media (max-width: 768px) {
.menu-label {
display: block;
}

.nav-menu {
display: none;
flex-direction: column;
gap: 1rem;
position: absolute;
top: 100%;
left: 0;
background: #0d47a1;
width: 100%;
padding: 1rem 0;
z-index: 1000;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.menu-toggle:checked + .menu-label + .nav-menu {
display: flex;
}

.nav-links {
flex-direction: column;
align-items: flex-start;
}

.nav-links a {
padding: 0.5rem 1rem;
}
}< /code>



[*]




Title



☰

• Home
• Services
  
  Bootcamps
• Courses
• Subscribe

[*]
Resources

• Machines
• CTFs
• Challenges

[*]
Community

• Forum
• Blogs

[*]
Our Team

• About
• Contact

< /code>
< /div>
< /div>
< /p>
Я пытаюсь добавить эту навигационную панель в Хостейнгер, но он выглядит как :

Я сталкиваюсь с трудностями, связанными с интеграцией моего настраиваемого NAVBAR в мой веб-сайт, размещенный на хостингере. Я пытался сделать различные шаги по устранению неполадок, включая удаление элементов JavaScript и упрощение кода, но проблема сохраняется.>

Подробнее здесь: https://stackoverflow.com/questions/793 ... -correctly