CODEWITHSUNDEEP
htmlcss
Noob
Noob

Reputation: 25

Space between navigation bar and drop-down bar

I'm fairly new to html, and when I tried to create a webpage, I encountered a problem. I managed to make a navigation bar with a drop down menu directly under the "Games" section, but if I scroll down and open the drop down menu, it no longer opens directly under the navigation bar. This is my HTML code.

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

And this is the stylesheet.

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;
}

Please help me as I've been trying to solve this problem for 2 days. Also, this is my first time posting a question here, so forgive me if I indented my code wrongly, or if I inadvertently violated some of the rules of Stack Overflow.

Upvotes: 0

Views: 121

Answers (2)

Marvin
Marvin

Reputation: 10092

The reason for this behaviour is that your drop-content has position:fixed on hover.

From MDN:

…an element that is absolutely positioned is taken out of the flow; thus, other elements are positioned as if it did not exist. The absolutely positioned element is positioned relative to its nearest positioned ancestor… Fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the viewport.

Working example on JSFiddle and here is what I've changed:

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

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

Upvotes: 1

Swapna
Swapna

Reputation: 843

Update CSS to 

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

  1. Removed overflow:hidden in #nav ul
  2. Keot display:block only in .drop:hover .drop-content

Upvotes: 0

Related Questions