Имеется проблема с выпадающим меню. Почему-то при наведении курсора меню съезжает вверх и как бы отсоединяется от основного (как на картинке), а должно выпадать снизу. И хотелось бы, чтобы эти две кнопки располагались на навигационном баре корректно. Заранее благодарю.[![
.fullscreen-bg {
overflow: hidden;
position: relative;
height: 100%;
width: 100%;
padding-top: 45%;
}
.overlay2 {
background: rgba(0,0,0,0.5);
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
z-index: 2;
}
.fullscreen-bg__video {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
p {
text-align: center;
color: white;
font-family: 'Montserrat', sans-serif;
}
p > .tga {
color: white;
item-align: centerS;
bottom: 150px;
}
.dws-menu *{
margin: 0;
padding: 0;
}
.dws-menu ul, .dws-menu ol{
list-style: none;
}
.dws-menu > ul{
display: flex;
justify-content: center;
}
.dws-menu > ul li a{
display: block;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f2f5f6+0,e3eaed+37,c8d7dc+100;Grey+3D+%234 */
background: rgb(242,245,246); /* Old browsers */
background: -moz-linear-gradient(top, rgba(242,245,246,1) 0%, rgba(227,234,237,1) 37%, rgba(200,215,220,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f5f6', endColorstr='#c8d7dc',GradientType=0 ); /* IE6-9 */
padding: 15px 30px 15px 40px;
font-size: 14px;
color: #454547;
text-decoration: none;
text-transform: uppercase;
transition: all 0.3s ease;
}
.dws-menu > ul li{
position: relative;
border-right: 1px solid #c7c8ca;
border-radius: 5px;
font-family: 'Inconsolata', monospace;
z-index: 2;
top: -200px;
}
.dws-menu > ul li > a i.fa{
position: absolute;
top: 15px;
left: 12px;
font-size: 18px;
}
.dws-menu > ul li:first-child{
border-left: 1px solid #b2b3b5;
}
.dws-menu > ul li:last-child{
border-right: 1px solid #babbbd;
}
.dws-menu li a:hover{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#c3d9ff+0,b1c8ef+41,98b0d9+100;Lavender+3D */
background: rgb(195,217,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(195,217,255,1) 0%, rgba(177,200,239,1) 41%, rgba(152,176,217,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(195,217,255,1) 0%,rgba(177,200,239,1) 41%,rgba(152,176,217,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(195,217,255,1) 0%,rgba(177,200,239,1) 41%,rgba(152,176,217,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c3d9ff', endColorstr='#98b0d9',GradientType=0 ); /* IE6-9 */
color: #ffffff;
box-shadow: 1px 5px 10px -5px black;
transition: all 0.5s ease;
border-radius: 5px;
}
/* SUB MENU */
.dws-menu li ul{
position: absolute;
min-width: 145px;
display: none;
}
.dws-menu li > ul li{
border: 1px solid #c7c8ca;
}
.dws-menu li > ul li a{
padding: 15px;
text-transform: none;
background: #e4e4e5;
}
.dws-menu li > ul li ul{
position: absolute;
right: -150px;
top: 0;
}
.dws-menu li:hover > ul{
display: block;
text-align: center;
top: 0;
}
<!DOCTYPE html>
<html lang="ru">
<head>
<link rel="stylesheet" href="css/font-awesome.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200&display=swap" rel="stylesheet">
<title>Веб-разработчик</title>
</head>
<body>
<div class="fullscreen-bg">
<div class="overlay2">
<p>
<strong class="tga">
Hey Everyone! My name is @!<br>
I'm a beginer for web-development and web-design. I'd appreciate if you choose me as a designer for you project (even if my salary is marginally low).<br>
Because every job I will make will be my advantage in the future!
</strong>
</p>
<p>
Learnin' JS with conscience
</p>
</div>
<div class="dws-menu">
<ul>
<li><a href="#"><i class="fa fa-address-card"></i>Контакты</a>
<ul>
<li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i>Instagram</i></a></i></a></li>
<li><a href="#"><i class="fa fa-vk" aria-hidden="true"></i>VK</a></li>
</ul></li>
<li><a href="#"><i class="fa fa-book"></i>Мои проекты</a><ul>
<li href="#"><a href="#">В процессе!</a></li>
</ul></li>
</ul>
</div>
<video loop="" muted="" autoplay="" poster="video/plane.jpg" class="fullscreen-bg__video">
<source src="https://sitehere.ru/examples/30.06.2015/video/plane.mp4" type="video/mp4">
<source src="video/plane.webm" type="video/webm">
</video>
</div>
</body>
</html>
top: -200px;
отрабатывает