Когда я устанавливаю положение своего UL на фиксированное значение, выпадающий список не появляется при наведении курсора на ИГРЫ!Но когда я удаляю фиксированную позицию, тогда выпадающий список работает, но позиция моего UL меняется
Когда я держу его фиксированным, он прикрепляется к верхней и левой части экрана, как панель навигации, и это то, что я хочуно когда я удаляю фиксированное положение, выпадающий список работает, но он больше не привязан к левому и верхнему краям, и я попытался установить поля, но все же он не прилипает к верхнему и левому краям!Вот мой код:
HTML-код: -
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">Contact</a></li>
<li class="dropdown"><a href="#contact" class="dropbtn">Games</a>
<div class="dropdown-content">
<a href="#">PUBG</a>
<a href="#">Fortnite</a>
<a href="#">PUBG Mobile</a>
</div>
</li>
<li style="float:right"><a href="#about">About</a></li>
</ul>
Код CSS: -
ul {
list-style-type: none;
padding: 0;
overflow: hidden;
background-color: #333;
top: 0;
left: 0;
width: 100%;
margin-top: 0px;
margin-bottom: 0px;
}
li {
float: left;
}
li a, .dropbtn {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
text-decoration: none;
color: white;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
position: absolute;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #333}
.dropdown:hover .dropdown-content {
display: block;
}
.active {
background-color: #80e5ff;
color: black;
text-decoration: none !important;
}