Пробел между панелью навигации и выпадающей панелью

Question

Я довольно новичок в html, и когда я попытался создать веб-страницу, у меня возникла проблема. Мне удалось создать навигационную панель с выпадающим меню прямо в разделе «Игры», но если я прокручу вниз и откройте раскрывающееся меню, оно больше не открывается непосредственно под панелью навигации. Это мой HTML-код.

<div class="wrapper"> 
    <div id="main-title"> 
     <header> 
      <h1>Max Reviews</h1> 
     </header> 
    </div>                    <!-- Title box--> 
     <div id="nav">                 <!-- Navigation Bar --> 
      <nav>                 
       <ul> 
        <li><a class="active" href="#">Home</a></li> 
        <li><a href="about.html">About Me</a></li>       <!-- Link to about page --> 
        <li class="drop"> 
         <a href="games.html" class="dropbtn"><p>Games</p></a> 
         <div class="drop-content"> 
          <a href="rfg.html"><p>Red Faction: Guerrilla</p></a>     <!-- Contains links to the respective pages --> 
          <a href="wots3.html"><p>Way of the Samurai 3</p></a> 
          <a href="singularity.html"><p>Singularity</p></a> 
         </div> 
        </li> 
        <li><a href="reviews.html">Reviews</a></li> 
        <li><a href="external.html">External Store</a></li>     <!-- Link to external site --> 
        <li><a href="video.html">Videos</a></li>       <!-- Contains links to Youtube --> 
       </ul> 
      </nav> 
     </div> 
    <div class="image">                <!-- Banner--> 
      <a href="singularity.html"> 
       <img src="modified singularity aging 1.jpg" alt="singularity"> 
       <h2><span>Recommended Game of the Month</span></h2> 
      </a> 
     </div> 
     <div id="home-content"><p>Learn more about the site &#9755<a href="about.html">here</a>&#9754</p></div> 
     <div id="footer"> 
     <p>&copy Copyright 2016-2017. All images here were taken and edited by me. All rights reserved. Games featured here might not be suitable for all audience.</p> 
     </div> 
</div> 

И это таблица стилей.

article, body, div, footer, header, h1, h2, p { 
    border: 0; 
    padding: 0; 
    margin: 0; 
} 
html, body { 
    height: 100%; 
    margin: 0; 
    width: 100%; 
    background-color: #FFFFFF; 
    padding: 0px; 
    overflow-x: hidden; 
} 
body { 
    transition: background 600s ease-in-out; 
} 
body:hover { 
    background-color: #4B0101; 
} 
/*main title*/ 
#main-title { 
    background-color: #33B2E7; 
    color: #FFFFFF; 
    position: relative; 
    top: 25px; 
    left: 20px; 
    padding: 10px; 
    margin-left: 10px; 
    display: inline-block; 
    transition: color 1s, transform 1s; 
    transition-delay: 2s; 
} 
#main-title:hover { 
    color: black; 
    transform: rotate(360deg); 
} 
/* Nav */ 
#nav nav{ 
    padding-top: 100px; 
    margin-bottom: 0; 
} 
#nav ul { 
    list-style-type: none; 
    margin: 0; 
    overflow: hidden; 
    background-color: #1C86EE; 
    padding: 0; 
    position: relative; 
    width: 100%; 
    bottom: 40px; 
    display: inline-block; 
} 
#nav li { 
    float: left; 
    width: 16%; 
} 
li a, .dropbtn { 
    display: inline-block; 
    color: #FFFFFF; 
    text-align: center; 
    padding-left: 50px; 
    padding-right: 50px; 
    text-decoration: none; 
} 
.active { 
    background-color: #6CCC0A; 
    padding-right: 50px; 
} 
li a:hover, .drop:hover .dropbtn { 
    background-color: #BFA811; 
} 
a { 
    padding-top: 10px; 
    padding-bottom: 10px; 
} 
li.drop { 
    display: inline-block; 
} 
.drop-content { 
    display: none; 
    position: absolute; 
    background-color: #970707; 
    min-width: 50px; 
    box-shadow: 0px 8px 16px 0px #000000; 
    z-index: 100; 
} 
.drop-content a { 
    color: #FFFFFF; 
    padding: 15px 20px; 
    display: block; 
    text-align: left; 
} 
.drop-content a:hover { 
    background-color: #02BBC4 
} 
.drop:hover .drop-content { 
    display: block; 
    position: fixed; 
    top: 155px; 
    border: 1px solid black;; 
} 
/*banner*/ 
.image { 
    position: relative; 
    width: 100%; 
} 
.image h2 { 
    position: absolute; 
    top: 600px; 
    text-align: center; 
    width: 100%; 
    right: 350px; 
} 
.image h2 span { 
    color: #FFFFFF; 
    font: Arial, Calibri, Sans-serif; 
    background: #000000; 
    padding: 10px; 
} 
.image h2:hover span { 
    background-color: #003316; 
} 
.button { 
    position: absolute; 
    top: 1013px; 
    left: 700px; 
    padding: 16px 32px; 
    text-align: center; 
    margin: 4px 2px; 
    display: inline-block; 
    cursor: pointer; 
    background-color: rgb(41,120,104); 
    color: rgb(240,144,22); 
    font-family: Cambria, Times New Roman, serif; 
    font-size: 20px; 
} 
/*content*/ 
#home-content { 
    position: relative; 
    padding: 20px; 
    text-align: center; 
    margin-left: 90px; 
    display: block; 
    color: #8A0707 
} 
#home-content a { 
    color: #09922A 
}home-content a:visited { 
    color: #000000 
} 
/*Footer*/ 
#footer { 
    background: #000000; 
    width: 100%; 
    height: 40px; 
    position: relative; 
    bottom: 0; 
    left: 0; 
    padding-top: 10px; 
    overflow: hidden; 
} 
#footer p { 
    font-family: arial, calibri, sans-serif; 
    color: #FFFFFF; 
    text-align: center; 
} 
#aboutme h2 { 
    margin-bottom: 20px; 
    text-align: center; 
    text-decoration: underline; 
    font-family: Cambria, Calibri, sans-serif; 
    font-size: 20px; 
    color: #000000; 
} 
#aboutme article { 
    padding-top: 20px; 
    position: relative; 
    margin-left: 25%; 
    margin-right: 25%; 
    display: inline-block; 
    font-family: arial, cambria, serif; 
    line-height: 200%; 
    color: #777000; 
    text-align: center; 
    border: 2px solid #000000; 
    padding: 10px; 
} 
#gallery-title { 
    text-align: center; 
    font-family: Cambria, calibri, sans-serif; 
    padding-top: 20px; 
} 
#image-1 { 
    text-align: center; 
    margin: 0 25%; 
    padding: 20px; 
} 
.img-desc-1 { 
    padding: 20px; 
    color: #047615; 
} 
#image-2 { 
    text-align: center; 
    margin: 0 25%; 
    border: 2px solid #262020; 
    padding: 20px; 
} 
#prompt-text { 
    text-align: center; 
    padding-top: 30px; 
    font-family: cambria, calibri, sans-serif; 
} 
.image-container img{ 
    height: 300px; 
    width: 300px; 
    padding-left: 60px; 
    padding-top: 60px; 
} 
.image-container p{ 
    padding-left: 80px; 
    font-family: Arial, cambria, sans-serif; 
    color: #560404; 
    text-decoration: none; 
} 
.image-container { 
    display: block; 
    text-align: center; 
    padding-left: 20px; 
} 
#image1 { 
    padding-right: 60px; 
    padding-bottom: 10% 
} 
#image2 { 
    padding-right: 60px; 
    padding-bottom: 10%; 
} 
#image3 { 
    padding-bottom: 0; 
    margin: 0; 
} 
.gameimages { 
    padding-bottom: 15%; 
    text-align: center; 
} 
.gameimages p { 
    padding-top: 20px; 
} 
.gameimages h3 { 
    text-align: center; 
    font-family: cambria, times new roman, sans-serif 
} 
#side-nav { 
    height: 200px; 
    float: right; 
    bottom: 1500px; 
    right: 3%; 
    padding: 10px; 
    background-color: #8C3406; 
    display: block; 
    position: relative; 
    text-align: center; 
} 

Пожалуйста, помогите мне, поскольку я пытался решить эту проблему в течение 2 дней. Кроме того, это мой первый вопрос, задающий вопрос здесь, так что простите меня, если я неправильно отпечатал свой код, или если я непреднамеренно нарушил некоторые правила переполнения стека.

Answer 1

Причина такого поведения заключается в том, что у вашего drop-content есть position:fixed при зависании.

От MDN:

... элемент, который абсолютно позиционирован берется из потока; таким образом, другие элементы расположены так, как будто их не было. Абсолютно позиционированный элемент расположен относительно его ближайшего расположенного предка ... Фиксированное позиционирование аналогично абсолютному позиционированию, за исключением того, что содержащий блок элемент является окном .

Working example on JSFiddle и вот что я изменился:

#nav ul { 
    /*overflow: hidden;*/ 
} 

.drop:hover .drop-content { 
    /*position: fixed; 
    top: 155px;*/ 
    position: absolute; 
} 

Answer 2

Обновление CSS для

article, body, div, footer, header, h1, h2, p { 
    border: 0; 
    padding: 0; 
    margin: 0; 
} 
html, body { 
    height: 100%; 
    margin: 0; 
    width: 100%; 
    background-color: #FFFFFF; 
    padding: 0px; 
    overflow-x: hidden; 
} 
body { 
    transition: background 600s ease-in-out; 
} 
body:hover { 
    background-color: #4B0101; 
} 
/*main title*/ 
#main-title { 
    background-color: #33B2E7; 
    color: #FFFFFF; 
    position: relative; 
    top: 25px; 
    left: 20px; 
    padding: 10px; 
    margin-left: 10px; 
    display: inline-block; 
    transition: color 1s, transform 1s; 
    transition-delay: 2s; 
} 
#main-title:hover { 
    color: black; 
    transform: rotate(360deg); 
} 
/* Nav */ 
#nav nav{ 
    padding-top: 100px; 
    margin-bottom: 0; 
} 
#nav ul { 
    list-style-type: none; 
    margin: 0; 
    background-color: #1C86EE; 
    padding: 0; 
    position: relative; 
    width: 100%; 
    bottom: 40px; 
    display: inline-block; 
} 
#nav li { 
    float: left; 
    width: 16%; 
} 
li a, .dropbtn { 
    display: inline-block; 
    color: #FFFFFF; 
    text-align: center; 
    padding-left: 50px; 
    padding-right: 50px; 
    text-decoration: none; 
} 
.active { 
    background-color: #6CCC0A; 
    padding-right: 50px; 
} 
li a:hover, .drop:hover .dropbtn { 
    background-color: #BFA811; 
} 
a { 
    padding-top: 10px; 
    padding-bottom: 10px; 
} 
li.drop { 
    display: inline-block; 
} 
.drop-content { 
    display: none; 
    position: absolute; 
    background-color: #970707; 
    min-width: 50px; 
    box-shadow: 0px 8px 16px 0px #000000; 
    z-index: 100; 
} 
.drop-content a { 
    color: #FFFFFF; 
    padding: 15px 20px; 
    display: block; 
    text-align: left; 
} 
.drop-content a:hover { 
    background-color: #02BBC4 
} 
.drop:hover .drop-content { 
    display: block; 
} 
/*banner*/ 
.image { 
    position: relative; 
    width: 100%; 
} 
.image h2 { 
    position: absolute; 
    top: 600px; 
    text-align: center; 
    width: 100%; 
    right: 350px; 
} 
.image h2 span { 
    color: #FFFFFF; 
    font: Arial, Calibri, Sans-serif; 
    background: #000000; 
    padding: 10px; 
} 
.image h2:hover span { 
    background-color: #003316; 
} 
.button { 
    position: absolute; 
    top: 1013px; 
    left: 700px; 
    padding: 16px 32px; 
    text-align: center; 
    margin: 4px 2px; 
    display: inline-block; 
    cursor: pointer; 
    background-color: rgb(41,120,104); 
    color: rgb(240,144,22); 
    font-family: Cambria, Times New Roman, serif; 
    font-size: 20px; 
} 
/*content*/ 
#home-content { 
    position: relative; 
    padding: 20px; 
    text-align: center; 
    margin-left: 90px; 
    display: block; 
    color: #8A0707 
} 
#home-content a { 
    color: #09922A 
}home-content a:visited { 
    color: #000000 
} 
/*Footer*/ 
#footer { 
    background: #000000; 
    width: 100%; 
    height: 40px; 
    position: relative; 
    bottom: 0; 
    left: 0; 
    padding-top: 10px; 
    overflow: hidden; 
} 
#footer p { 
    font-family: arial, calibri, sans-serif; 
    color: #FFFFFF; 
    text-align: center; 
} 
#aboutme h2 { 
    margin-bottom: 20px; 
    text-align: center; 
    text-decoration: underline; 
    font-family: Cambria, Calibri, sans-serif; 
    font-size: 20px; 
    color: #000000; 
} 
#aboutme article { 
    padding-top: 20px; 
    position: relative; 
    margin-left: 25%; 
    margin-right: 25%; 
    display: inline-block; 
    font-family: arial, cambria, serif; 
    line-height: 200%; 
    color: #777000; 
    text-align: center; 
    border: 2px solid #000000; 
    padding: 10px; 
} 
#gallery-title { 
    text-align: center; 
    font-family: Cambria, calibri, sans-serif; 
    padding-top: 20px; 
} 
#image-1 { 
    text-align: center; 
    margin: 0 25%; 
    padding: 20px; 
} 
.img-desc-1 { 
    padding: 20px; 
    color: #047615; 
} 
#image-2 { 
    text-align: center; 
    margin: 0 25%; 
    border: 2px solid #262020; 
    padding: 20px; 
} 
#prompt-text { 
    text-align: center; 
    padding-top: 30px; 
    font-family: cambria, calibri, sans-serif; 
} 
.image-container img{ 
    height: 300px; 
    width: 300px; 
    padding-left: 60px; 
    padding-top: 60px; 
} 
.image-container p{ 
    padding-left: 80px; 
    font-family: Arial, cambria, sans-serif; 
    color: #560404; 
    text-decoration: none; 
} 
.image-container { 
    display: block; 
    text-align: center; 
    padding-left: 20px; 
} 
#image1 { 
    padding-right: 60px; 
    padding-bottom: 10% 
} 
#image2 { 
    padding-right: 60px; 
    padding-bottom: 10%; 
} 
#image3 { 
    padding-bottom: 0; 
    margin: 0; 
} 
.gameimages { 
    padding-bottom: 15%; 
    text-align: center; 
} 
.gameimages p { 
    padding-top: 20px; 
} 
.gameimages h3 { 
    text-align: center; 
    font-family: cambria, times new roman, sans-serif 
} 
#side-nav { 
    height: 200px; 
    float: right; 
    bottom: 1500px; 
    right: 3%; 
    padding: 10px; 
    background-color: #8C3406; 
    display: block; 
    position: relative; 
    text-align: center; 
} 

2 изменения сделали.

1. Удалены overflow:hidden в #nav ul
2. Keot display:block только в .drop:hover .drop-content