имеется проблема с выпадающим меню. В частности с КОНТАКТАМИ, оно почему-то ездит при сжимании страницы, а должно быть зафиксированным как в случае с УСЛУГАМИ. С чем это может быть связано?
* {
padding: 0;
margin: 0;
font-family: Verdana, sans-serif;
}
ul {
background-color: #689cd2;
display: flex;
justify-content: center;
}
ul li:hover {
background-color: gray;
transition: .3s;
}
ul li {
list-style-type: none;
padding: 15px;
}
ul li a {
text-decoration: none;
color: black;
}
i.fa {
padding-right: 5px;
font-size: 20px;
vertical-align: middle;
}
i.fa-angle-down {
padding-left: 5px;
vertical-align: middle;
}
.nav li .submenu {
display: none;
border-top: 1px solid transparent;
width: 133px;
text-align: center;
}
.nav li > ul li {
border-bottom: 1.2px solid white;
}
.nav li:hover .submenu {
position: absolute;
display: block;
top: 52px;
right: 50%;
}
.nav li .submenu-second {
display: none;
width: 133px;
border-top: 1px solid transparent;
text-align: center;
}
.nav li:hover .submenu-second {
display: block;
position: absolute;
top: 52px;
right: 33.2%;
}
@media screen and (max-width: 530px) {
ul {
display: block;
text-align: center;
}
.nav li .submenu {
display: none;
width: 130px;
text-align: center;
background-color: #509be8;
}
.nav li > ul li {
border-bottom: 1px solid white;
}
.nav li:hover .submenu {
position: absolute;
display: block;
top: 51px;
right: 7%;
}
.nav li .submenu-second {
display: none;
width: 130px;
text-align: center;
background-color: #509be8;
}
.nav li > ul li {
border-bottom: 1px solid white;
}
.nav li:hover .submenu-second {
position: absolute;
display: block;
top: 20%;
right: 7%;
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>
<body>
<div class="header">
<nav class="nav">
<ul>
<li><a href="#"><i class="fa fa-home" aria-hidden="true"></i>Главная</a></li>
<li><a href="#"><i class="fa fa-shopping-basket" aria-hidden="true"></i>Услуги<i class="fa fa-angle-down"></i></a>
<ul class="submenu">
<li><a href="#">Услуга 1</a></li>
<li><a href="#">Услуга 2</a></li>
<li><a href="#">Услуга 3</a></li>
</ul>
</li>
<li><a href="#"><i class="fa fa-newspaper-o" aria-hidden="true"></i>Новости</a></li>
<li class="main"><a href="#"><i class="fa fa-phone" aria-hidden="true"></i>Контакты</a>
<ul class="submenu-second">
<li><a href="#">Контакт 1</a></li>
<li><a href="#">Контакт 2</a></li>
<li><a href="#">Контакт 3</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</body>