Необходима помощь с выпадающим меню css

Question

Имеется проблема с выпадающим меню. Почему-то при наведении курсора меню съезжает вверх и как бы отсоединяется от основного (как на картинке), а должно выпадать снизу. И хотелось бы, чтобы эти две кнопки располагались на навигационном баре корректно. Заранее благодарю.[![

.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>

Answer 1

.dws-menu>ul>li {

и

.dws-menu li:hover>ul {
top: 100%;

.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: 100%;
}

<!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>

БЛОГ НА HUSL

Необходима помощь с выпадающим меню css

Ответы (1 шт):