0

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

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

введите сюда описание изображения

введите сюда описание изображения

1
  • Ну так у вас top: -200px; отрабатывает 4 авг 2020 в 16:17

1 ответ 1

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

3
  • Спасибо,сработало! 4 авг 2020 в 16:52
  • Интересно, а как отсутствие top привело к разрыву выпадающего меню? 4 авг 2020 в 16:55
  • Не отсутствие топ, привело к этому, а то что вы назначали всем li top -200, это первая заметка. А второе топ 100%, для того чтобы меню не наезжало на кнопку. 5 авг 2020 в 3:29

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.