Why do my dropdown menus appear behind my background image for body?

Question

I built a horizontal menu with dropdown menus under each category. I know in general my website coding has been unorganized, but the main issue is why the dropdown menus are obscured by a wrapper I have above the main content of my page. In the jsfiddle it would be behind the "Uganda" and extend across the page. Whenever I open a dropdown menu however, the dropdown goes behind the wrapper despite it being classified as a background-image in my css.

https://jsfiddle.net/pr8kexmt/

a {
  text-decoration: none;
  display: block;
  padding: 12px 16px;
}

body {
  margin: 0px;
  overflow-x: hidden;
}

.bodycontent {
  z-index: -1;
}

.content {
  font-family: verdana;
  font-size: 30px;
}

.donate {
  background-color: orange;
  border: white;
  color: rgb(255, 255, 255);
  padding: 7px 14px;
  font-size: 15px;
  border-radius: 8px;
}

.donate:hover {
  background-color: rgb(102, 51, 0);
  color: rgb(255, 255, 255);
}

.divnav {
  width: 100%;
  overflow: hidden;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropbtn {
  font-size: 13px;
  border: none;
  outline: none;
  background-color: inherit;
  float: right;
  display: block;
  margin: 3px 3px 3px 3px;
  font-family: verdana;
  font-weight: 550;
}

.dropbtn:hover {
  color: orange;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  overflow: auto;
  top: 100%;
}

.dropdown-contentblock {
  height: 20px;
}

.dropdown:hover .dropdown-content {
  display: block;
}

html {}

.image {
  overflow: hidden;
}

.navbar {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.navelement {
  float: right;
  display: block;
  margin: 3px 3px 3px 3px;
  font-family: verdana;
  font-size: 13px;
  font-weight: 550;
}

.nava {
  padding: 5px;
}

.nava:hover {
  background-color: white;
  color: orange;
}

.pagetitle {
  height: 68px;
  width: 100%;
  background-image: url("pictures/titlebar1.jpg");
  z-index: -10;
}

.par {
  /* DIV THAT GOES UNDER TODOCONTENT ONLY AND MARKS A PARAGRAPH WITH INFORMATIVE CONTENT*/
}

.parcontent {
  font-family: verdana;
  color: rgb(150, 150, 150);
  font-size: 15px;
}

.titleimage {
  overflow: hidden;
  height: 310px;
  margin: 0px;
  width: 100%;
}

.title {
  font-family: verdana;
  font-size: 50px;
  color: white;
}

.todocontent {
  width: 47%;
  /* A DIV WITH CLASS TODOCONTENT MEANS A DIV THAT WILL CONTAIN ALL INFORMATIVE CONTENT OF THE PAGE*/
}

.wrapper {
  width: 100%;
  height: 5%;
  overflow: hidden;
}


  


  
    
  
  
    
  
  
    
      
        
        
      
      
        
        
          Vision & Mission
          What We Do
          Our Story
          GLI Leadership
          Academic Partners
          Annual Report
        
      
      
        
        
          Immersion Trips
          Internships
          IKnow Concert Series
          Women's Leadership Retreat
          Youth Summit
        
      
      
        
        
          About Entusi
          Entusi Leadership
        
      
      
        
        
          Press
          Blog
          Videos
        
      
      
        
        
      
      
        
        
          Orientational Materials
          F.A.Q.
        
      
      
        
        
          Articles
          Capstones
        
      
      
        
        
      
    
  
  
    
  




  
    
      
        Uganda
      
    
    
      
        
          Uganda was formed from the colonization of the Buganda Kingdom by the British in the 19th century. Britain wanted to protect the viability of the Nile River for its trading potential which prompted the British government to annex Buganda to create the
          Uganda Protectorate in 1894. In 1962 Uganda regained its independence and declared itself a republic with Milton Obote as the first prime minister and former Bugandan King Muteesa as the president. Despite being largely ceremonial, Obote removed
          the presidential position and established a new constitution in which he became a powerful president similar to a dictator. After committing many atrocities Obote was removed from power in a coup orchestrated by General Idi Amin who seized control
          of the country. Amin proceeded to be nearly as atrocious as Obote when almost 500,000 citizens perished under his regime. Despite entering presidency with cheers, his actions made the country of Uganda hate him. After Amin was removed from power
          by largely Tanzanian forces, Obote returned to presidency. A war broke out as a result from the election resulting in the deaths of between 100 and 500,000 people. This compelled 2 military commanders to conduct a coup in which Museveni gained
          control. Yoweri Museveni remains in power till this date.

Why do my dropdown menus appear behind my background image for body?

Answers (1)

Related Questions