Why is my drop-down nav bar displaying behind webpage content on some pages?

Question

I am working on some web pages for a class project and noticed that in two of my webpages the drop-down nav bar displays properly over the content on my web page, but in the other two pages the web content appears over the drop-down nav bar. Trying to figure out why that is. I also noticed that my footer displays correctly on the bottom of the page in the first example but doesn't display correctly on the bottom of the page in the second example and am not sure why. I'll include the code for both the incorrect and correct display. INCORRECT DROP DOWN BUT CORRECT FOOTER:

body {
  background-color: whitesmoke;
}


/* Header */

.header {
  width: 100%;
  height: 50px;
  display: block;
  background-color: #61d1e2;
  /* For browsers that do not support gradients */
  background-image: linear-gradient(#e7bddc, #61d1e2);
}

.header_content {
  width: 100%;
  height: 100%;
  display: block;
  margin: 0 auto;
  background-color: #61d1e2;
  /* For browsers that do not support gradients */
  background-image: linear-gradient(#e7bddc, #61d1e2);
}

.logo_container {
  height: 100%;
  display: table;
  float: left;
  border: none;
}

.logo {
  max-height: 50px;
  display: table-cell;
  vertical-align: middle;
}


/* Navigation */

.navigation {
  float: right;
  height: 100%;
  margin: 0;
}

.navigation li {
  float: left;
  height: 100%;
  display: table-cell;
  padding: 15px 20px;
  position: relative;
  box-sizing: border-box;
  text-decoration: none;
}

a:hover {
  color: #bc0456 !important;
}

.navigation li a {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  color: #067393;
  font-family: Kapelka New;
  text-decoration: none !important;
}

.sub_menu1 {
  display: none;
}

.navigation li:hover .sub_menu1 {
  display: block;
  position: absolute;
  background: lightblue;
  top: 100%;
}

.navigation li:hover .sub_menu1 ul {
  display: inline-block;
  margin: 0%;
  padding: 0%;
  text-align: center;
}

.navigation li:hover .sub_menu1 ul li {
  padding: 5px;
}


/* Headings */

h1 {
  color: #067393;
  font-family: athelas;
  font-style: italic;
  font-weight: 400;
  font-size: 48px;
  text-align: center;
  letter-spacing: 3px;
}

h2 {
  color: #067393;
  font-family: athelas, serif;
  font-style: normal;
  font-weight: 400;
  font-size: 36px;
}

h3 {
  color: #067393;
  font-family: athelas, serif;
  font-style: normal;
  font-size: 24px;
}

h4 {
  color: #bc0456;
  font-family: athelas, serif;
  font-style: normal;
  font-size: 36px;
  margin-bottom: 0%;
}


/* Homepage Image */


/* Container holding the image and the text */

.home_container {
  padding: 50px;
  position: relative;
  text-align: center;
  background-color: #f99a61;
  height: 500px;
}

.box {}

.home_image {
  width: 50%;
}


/* Centered text */

.home_container2 {
  padding: 10px;
  display: flex;
  justify-content: space-around;
  position: relative;
  text-align: center;
  background-color: lightblue;
  max-height: 500px;
}


/* Footer */

.footer {
  width: 100%;
  height: 100px;
  background-color: #61d1e2;
  /* For browsers that do not support gradients */
  background-image: linear-gradient(#e7bddc, #61d1e2);
  position: relative;
}

.footer_content {
  display: flex;
  height: 100px;
  text-align: center;
}





  
  
  
  
  
  MY Portfolio
  
  
  

  




  
  
    

      
        
          
            
          


        

        
          Home
          Portfolio
            
              
                Logo Portfolio
                Menu Designs
              

            
          
          About ME
            
Contact

        
      

    

  

  
    ArtUcii Designs
    

    
      
      

    


    

      By Alexandria
    
  

  
    
      Here to turn your creative visions into reality!
       Specaializing in logo design, menus, websites, and artistic graphics and prints. ArtUcii is here to deliver 
      

      ART YOU CAN SEE
      

       all your business and artistic needs.

CORRECT DROPDOWN BUT INCORRECT FOOTER:

@charset "UTF-8";

/* CSS Document */


/* About ME */


/* Google Font CDN Link */


/* Header */

.header {
  width: 100%;
  height: 50px;
  display: block;
  background-color: #61d1e2;
  /* For browsers that do not support gradients */
  background-image: linear-gradient(#e7bddc, #61d1e2);
}

.header_content {
  width: 100%;
  height: 100%;
  display: block;
  margin: 0 auto;
  background-color: #61d1e2;
  /* For browsers that do not support gradients */
  background-image: linear-gradient(#e7bddc, #61d1e2);
}

.logo_container {
  height: 100%;
  display: table;
  float: left;
  border: none;
}

.logo {
  max-height: 50px;
  display: table-cell;
  vertical-align: middle;
}


/* Navigation */

.navigation {
  float: right;
  height: 100%;
  margin: 0;
}

.navigation li {
  float: left;
  height: 100%;
  display: table-cell;
  padding: 15px 20px;
  position: relative;
  box-sizing: border-box;
  text-decoration: none;
}

a:hover {
  color: #bc0456 !important;
}

.navigation li a {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  color: #067393;
  font-family: Kapelka New;
  text-decoration: none !important;
}

.sub_menu1 {
  display: none;
}

.navigation li:hover .sub_menu1 {
  display: block;
  position: absolute;
  background: lightblue;
  top: 100%;
}

.navigation li:hover .sub_menu1 ul {
  display: inline-block;
  margin: 0%;
  padding: 0%;
  text-align: center;
}

.navigation li:hover .sub_menu1 ul li {
  padding: 5px;
}


/* Body */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  min-height: 100vh;
  width: 100%;
  background: #f99a61;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  width: 85%;
  background: #fff;
  border-radius: 6px;
  padding: 20px 60px 30px 40px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.container .content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.container .content .left-side {
  width: 25%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
  position: relative;
}

.content .left-side::before {
  content: '';
  position: absolute;
  height: 70%;
  width: 2px;
  right: -15px;
  top: 50%;
  transform: translateY(-50%);
  background: #afafb6;
}

.content .left-side .details {
  margin: 14px;
  text-align: center;
}

.content .left-side .details i {
  font-size: 30px;
  color: #067393;
  margin-bottom: 10px;
}

.content .left-side .details .topic {
  font-size: 18px;
  font-weight: 500;
}

.content .left-side .details .text-one,
.content .left-side .details .text-two {
  font-size: 14px;
  color: #afafb6;
}

.container .content .right-side {
  width: 75%;
  margin-left: 75px;
}

.content .right-side .topic-text {
  font-size: 23px;
  font-weight: 600;
  color: #bc0456;
}

.right-side .input-box {
  height: 50px;
  width: 100%;
  margin: 12px 0;
}

.right-side .input-box input,
.right-side .input-box textarea {
  height: 100%;
  width: 100%;
  border: none;
  outline: none;
  font-size: 16px;
  background: #F0F1F8;
  border-radius: 6px;
  padding: 0 15px;
  resize: none;
}

.right-side .message-box {
  min-height: 110px;
}

.right-side .input-box textarea {
  padding-top: 6px;
}

.right-side .button {
  display: inline-block;
  margin-top: 12px;
}

.right-side .button input[type="button"] {
  color: #fff;
  font-size: 18px;
  outline: none;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  background: #067393;
  cursor: pointer;
  transition: all 0.3s ease;
}

.button input[type="button"]:hover {
  background: #bc0456;
}

@media (max-width: 950px) {
  .container {
    width: 90%;
    padding: 30px 40px 40px 35px;
  }
  .container .content .right-side {
    width: 75%;
    margin-left: 55px;
  }
}

@media (max-width: 820px) {
  .container {
    margin: 40px 0;
    height: 100%;
  }
  .container .content {
    flex-direction: column-reverse;
  }
  .container .content .left-side {
    width: 100%;
    flex-direction: row;
    margin-top: 40px;
    justify-content: center;
    flex-wrap: wrap;
  }
  .container .content .left-side::before {
    display: none;
  }
  .container .content .right-side {
    width: 100%;
    margin-left: 0;
  }
}


/* Footer */

.footer {
  width: 100%;
  height: 100px;
  background-color: #61d1e2;
  /* For browsers that do not support gradients */
  background-image: linear-gradient(#e7bddc, #61d1e2);
  position: relative;
}

.footer_content {
  display: flex;
  height: 100px;
  text-align: center;
}






  
  
  
  
  Contact
  
  
  
  





  


    
      
        
          
        


      

      
        Home
        Portfolio
          
            
              Logo Portfolio
              Menu Designs
            

          
        
        About ME
          
Contact

      
    



  
  


  

    

      
        
          
            
            Address
            Los Angles, CA
            Austin,TX
          
          
            
            Phone
            (512) xxx-xxxx
            +
          
          
            
            Email
            artuciidesign@gmail.com
            alexandria.brown3@snhu.com
          
        
        
          Send me a message!
          

          Any questions or ideas, just fill out the form below and I'll be happy to help.

user_14190543 · Answer

Your first example can be fixed with a higher z-index on your dropdown menu:

body {
  background-color: whitesmoke;
}


/* Header */

.header {
  width: 100%;
  height: 50px;
  display: block;
  background-color: #61d1e2;
  /* For browsers that do not support gradients */
  background-image: linear-gradient(#e7bddc, #61d1e2);
}

.header_content {
  width: 100%;
  height: 100%;
  display: block;
  margin: 0 auto;
  background-color: #61d1e2;
  /* For browsers that do not support gradients */
  background-image: linear-gradient(#e7bddc, #61d1e2);
}

.logo_container {
  height: 100%;
  display: table;
  float: left;
  border: none;
}

.logo {
  max-height: 50px;
  display: table-cell;
  vertical-align: middle;
}


/* Navigation */

.navigation {
  float: right;
  height: 100%;
  margin: 0;
}

.navigation li {
  float: left;
  height: 100%;
  display: table-cell;
  padding: 15px 20px;
  position: relative;
  box-sizing: border-box;
  text-decoration: none;
}

a:hover {
  color: #bc0456 !important;
}

.navigation li a {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  color: #067393;
  font-family: Kapelka New;
  text-decoration: none !important;
}

.sub_menu1 {
  display: none;
}

.navigation li:hover .sub_menu1 {
  display: block;
  z-index: 10;
  position: absolute;
  background: lightblue;
  top: 100%;
}

.navigation li:hover .sub_menu1 ul {
  display: inline-block;
  margin: 0%;
  padding: 0%;
  text-align: center;
}

.navigation li:hover .sub_menu1 ul li {
  padding: 5px;
}


/* Headings */

h1 {
  color: #067393;
  font-family: athelas;
  font-style: italic;
  font-weight: 400;
  font-size: 48px;
  text-align: center;
  letter-spacing: 3px;
}

h2 {
  color: #067393;
  font-family: athelas, serif;
  font-style: normal;
  font-weight: 400;
  font-size: 36px;
}

h3 {
  color: #067393;
  font-family: athelas, serif;
  font-style: normal;
  font-size: 24px;
}

h4 {
  color: #bc0456;
  font-family: athelas, serif;
  font-style: normal;
  font-size: 36px;
  margin-bottom: 0%;
}


/* Homepage Image */


/* Container holding the image and the text */

.home_container {
  padding: 50px;
  position: relative;
  text-align: center;
  background-color: #f99a61;
  height: 500px;
}

.box {}

.home_image {
  width: 50%;
}


/* Centered text */

.home_container2 {
  padding: 10px;
  display: flex;
  justify-content: space-around;
  position: relative;
  text-align: center;
  background-color: lightblue;
  max-height: 500px;
}


/* Footer */

.footer {
  width: 100%;
  height: 100px;
  background-color: #61d1e2;
  /* For browsers that do not support gradients */
  background-image: linear-gradient(#e7bddc, #61d1e2);
  position: relative;
}

.footer_content {
  display: flex;
  height: 100px;
  text-align: center;
}





  
  
  
  
  
  MY Portfolio
  
  
  

  




  
  
    

      
        
          
            
          


        

        
          Home
          Portfolio
            
              
                Logo Portfolio
                Menu Designs
              

            
          
          About ME
            
Contact

        
      

    

  

  
    ArtUcii Designs
    

    
      
      

    


    

      By Alexandria
    
  

  
    
      Here to turn your creative visions into reality!
       Specaializing in logo design, menus, websites, and artistic graphics and prints. ArtUcii is here to deliver 
      

      ART YOU CAN SEE
      

       all your business and artistic needs.

Your footer displays fine in the first example because its markup isn't present in the second example.

@charset "UTF-8";

/* CSS Document */


/* About ME */


/* Google Font CDN Link */


/* Header */

.header {
  width: 100%;
  height: 50px;
  display: block;
  background-color: #61d1e2;
  /* For browsers that do not support gradients */
  background-image: linear-gradient(#e7bddc, #61d1e2);
}

.header_content {
  width: 100%;
  height: 100%;
  display: block;
  margin: 0 auto;
  background-color: #61d1e2;
  /* For browsers that do not support gradients */
  background-image: linear-gradient(#e7bddc, #61d1e2);
}

.logo_container {
  height: 100%;
  display: table;
  float: left;
  border: none;
}

.logo {
  max-height: 50px;
  display: table-cell;
  vertical-align: middle;
}


/* Navigation */

.navigation {
  float: right;
  height: 100%;
  margin: 0;
}

.navigation li {
  float: left;
  height: 100%;
  display: table-cell;
  padding: 15px 20px;
  position: relative;
  box-sizing: border-box;
  text-decoration: none;
}

a:hover {
  color: #bc0456 !important;
}

.navigation li a {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  color: #067393;
  font-family: Kapelka New;
  text-decoration: none !important;
}

.sub_menu1 {
  display: none;
}

.navigation li:hover .sub_menu1 {
  display: block;
  position: absolute;
  background: lightblue;
  top: 100%;
}

.navigation li:hover .sub_menu1 ul {
  display: inline-block;
  margin: 0%;
  padding: 0%;
  text-align: center;
}

.navigation li:hover .sub_menu1 ul li {
  padding: 5px;
}


/* Body */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  min-height: 100vh;
  width: 100%;
  background: #f99a61;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  width: 85%;
  background: #fff;
  border-radius: 6px;
  padding: 20px 60px 30px 40px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.container .content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.container .content .left-side {
  width: 25%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
  position: relative;
}

.content .left-side::before {
  content: '';
  position: absolute;
  height: 70%;
  width: 2px;
  right: -15px;
  top: 50%;
  transform: translateY(-50%);
  background: #afafb6;
}

.content .left-side .details {
  margin: 14px;
  text-align: center;
}

.content .left-side .details i {
  font-size: 30px;
  color: #067393;
  margin-bottom: 10px;
}

.content .left-side .details .topic {
  font-size: 18px;
  font-weight: 500;
}

.content .left-side .details .text-one,
.content .left-side .details .text-two {
  font-size: 14px;
  color: #afafb6;
}

.container .content .right-side {
  width: 75%;
  margin-left: 75px;
}

.content .right-side .topic-text {
  font-size: 23px;
  font-weight: 600;
  color: #bc0456;
}

.right-side .input-box {
  height: 50px;
  width: 100%;
  margin: 12px 0;
}

.right-side .input-box input,
.right-side .input-box textarea {
  height: 100%;
  width: 100%;
  border: none;
  outline: none;
  font-size: 16px;
  background: #F0F1F8;
  border-radius: 6px;
  padding: 0 15px;
  resize: none;
}

.right-side .message-box {
  min-height: 110px;
}

.right-side .input-box textarea {
  padding-top: 6px;
}

.right-side .button {
  display: inline-block;
  margin-top: 12px;
}

.right-side .button input[type="button"] {
  color: #fff;
  font-size: 18px;
  outline: none;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  background: #067393;
  cursor: pointer;
  transition: all 0.3s ease;
}

.button input[type="button"]:hover {
  background: #bc0456;
}

@media (max-width: 950px) {
  .container {
    width: 90%;
    padding: 30px 40px 40px 35px;
  }
  .container .content .right-side {
    width: 75%;
    margin-left: 55px;
  }
}

@media (max-width: 820px) {
  .container {
    margin: 40px 0;
    height: 100%;
  }
  .container .content {
    flex-direction: column-reverse;
  }
  .container .content .left-side {
    width: 100%;
    flex-direction: row;
    margin-top: 40px;
    justify-content: center;
    flex-wrap: wrap;
  }
  .container .content .left-side::before {
    display: none;
  }
  .container .content .right-side {
    width: 100%;
    margin-left: 0;
  }
}


/* Footer */

.footer {
  width: 100%;
  height: 100px;
  background-color: #61d1e2;
  /* For browsers that do not support gradients */
  background-image: linear-gradient(#e7bddc, #61d1e2);
  position: relative;
}

.footer_content {
  display: flex;
  height: 100px;
  text-align: center;
}






  
  
  
  
  Contact
  
  
  
  





  


    
      
        
          
        


      

      
        Home
        Portfolio
          
            
              Logo Portfolio
              Menu Designs
            

          
        
        About ME
          
Contact

      
    



  
  


  

    

      
        
          
            
            Address
            Los Angles, CA
            Austin,TX
          
          
            
            Phone
            (512) xxx-xxxx
            +
          
          
            
            Email
            artuciidesign@gmail.com
            alexandria.brown3@snhu.com
          
        
        
          Send me a message!
          

          Any questions or ideas, just fill out the form below and I'll be happy to help.

I have no idea why, but I've spent a few hours overhauling your HTML & CSS. If you want me to explain some things leave a comment.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
* {
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  background: #f99a61;
}

header {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-around;
  background-color: #61d1e2;
  /* For browsers that do not support gradients */
  background-image: linear-gradient(#e7bddc, #61d1e2);
}

header a {
  all: unset;
}

a:hover,
a:focus {
  color: #bc0456;
}

nav>ul {
  display: flex;
  flex-flow: row wrap;
}

nav ul {
  list-style: none;
}

nav li {
  position: relative;
  cursor: pointer;
  padding: 1rem 1.2rem;
  color: #067393;
  font-family: Kapelka New;
  text-decoration: none;
}

.logo {
  display: block;
  max-height: 50px;
}

.sub_menu1 {
  display: none;
  position: absolute;
  z-index: 10;
  background: lightblue;
  top: 100%;
  left: 0;
  text-align: center;
}

nav li:is(:hover,
 :focus,
 :active) .sub_menu1 {
  display: block;
}

nav li:focus-visible {
  outline: 2px solid #bc0456;
}

main {
  display: grid;
  max-width: 100%;
  background: white;
  padding: .5rem;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.contact input,
.contact textarea {
  all: unset;
  background: #F0F1F8;
  border-radius: 6px;
  padding: .3em .6em;
  margin-block: .2em;
  resize: none;
}

.contact input[type="submit"] {
  all: unset;
  cursor: pointer;
  font-size: 1.1rem;
  padding: .4em .8em;
  border-radius: 6px;
  background-color: #067393;
  color: #fff;
  transition: all 0.3s ease;
}

.contact input[type="submit"]:hover {
  background: #bc0456;
}

address {
  all: unset;
}

address>div {
  padding: 1em .2em;
}

address h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #bc0456;
}

address a {
  color: inherit;
  text-decoration: none;
}

address a:hover {
  color: #bc0456;
}

footer {
  min-height: 100px;
  text-align: center;
  background-color: #61d1e2;
  /* For browsers that do not support gradients */
  background-image: linear-gradient(#e7bddc, #61d1e2);
}

@media (min-width: 35rem) {
  main {
    margin: 4rem 2rem;
    border-radius: 6px;
    padding: 2rem;
  }
}

@media (min-width: 60rem) {
  main {
    grid-template-columns: 3fr 2fr;
    gap: 1rem;
  }
  address {
    padding-left: 1rem;
  }
}



  
    
  
  
    
      Home
      Portfolio
        
          Portfolio
          Logo Portfolio
          Menu Designs
        
      
      About ME
      Contact
    
  


  
    Send me a message!
    Any questions or ideas, just fill out the form below and I'll be happy to help.
    
      Name:

      

      Email:

      

      Message:

      

      
    
  
  
    
      
      Address
      Los Angles, CA

      Austin,TX
    
    
      
      Phone
      (512) xxx-xxxx

      +
    
    
      
      Email
      artuciidesign@gmail.com

      alexandria.brown3@snhu.com
    
  


  
    Footer

Why is my drop-down nav bar displaying behind webpage content on some pages?

1 Answers