title: Mobile drop down menu
body: <p>I'm stuck with this issue, my drop down menu is showing a black block over one of the menu lists, i have added a picture to explain better than words.</p>
  
  <p>I'm sure it's a simply problem, any help would be great.</p>
  
  <p>this is the JSfiddle link 
  <a href="https://jsfiddle.net/8pgn79cp/1/" rel="nofollow">https://jsfiddle.net/8pgn79cp/1/</a><a href="https://i.stack.imgur.com/OmzLB.png" rel="nofollow"><img src="https://i.stack.imgur.com/OmzLB.png" alt="enter image description here"></a></p>
  
  <pre><code>&lt;body&gt;
  &lt;div id="MainContainer"&gt;&lt;!--Start of MainContainer--&gt;
  
      &lt;div id="Header"&gt;&lt;!--Start of Header--&gt;
  
          &lt;div&gt;&lt;img id="Logo"src="images/logo.png"&gt;&lt;/div&gt;
  
  
          &lt;nav&gt;&lt;!--start of nav tag--&gt;
              &lt;span class="nav-btn"&gt;&lt;/span&gt;
                  &lt;ul class="nav"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Media&lt;/a&gt;
                          &lt;ul&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Sermons&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Gallery&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Blah&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
  
                      &lt;/li&gt;
  
                      &lt;li&gt;&lt;a href="#"&gt;Ministries&lt;/a&gt;
                          &lt;ul&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Evangelism&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Youth&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Newsletter&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Services&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;About Us&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;&lt;!--End of nav class ul tag--&gt;
          &lt;/nav&gt;&lt;!--End of nav tag--&gt;
  
      &lt;/div&gt;&lt;!--End of Header--&gt;
      &lt;div id="share"&gt;
  
  
      &lt;/div&gt;
  
          &lt;div class="firstsection"&gt;
  
  
  
  
  &lt;div class="slideshow-container"&gt;
  
  &lt;div class="mySlides fade"&gt;
    &lt;div class="numbertext"&gt;&lt;/div&gt;
    &lt;img src="images/verse.jpg" style="width:100%"&gt;
    &lt;div class="text"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="mySlides fade"&gt;
    &lt;div class="numbertext"&gt;&lt;/div&gt;
    &lt;img src="images/run.png" style="width:100%"&gt;
    &lt;div class="text"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="mySlides fade"&gt;
    &lt;div class="numbertext"&gt;&lt;/div&gt;
    &lt;img src="images/gill.jpg" style="width:100%"&gt;
    &lt;div class="text"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;br&gt;
  
  &lt;div style="text-align:center"&gt;
    &lt;span class="dot"&gt;&lt;/span&gt;
    &lt;span class="dot"&gt;&lt;/span&gt;
    &lt;span class="dot"&gt;&lt;/span&gt;
  &lt;/div&gt;
  
  
  
  
          &lt;/div&gt;
  
              &lt;div id="WelcomeBox"&gt;
                  &lt;img id="WelcomeImage" src="images/welcome logo.png"/&gt;
              &lt;/div&gt;
  
  
  
          &lt;div class="secondsection"&gt;
  
              &lt;p&gt;
  
                  First Words&lt;br&gt;&lt;br&gt;
                  *secondsection secondsection secondsection secondsection secondsection secondsection secondsection 
                  secondsection secondsection secondsection secondsection secondsection secondsection secondsection 
                  secondsection secondsection secondsection secondsection secondsection secondsection secondsection 
                  secondsection secondsection secondsection 
                  &lt;img id="ChurchPic" src="images/churchpic.png"&gt;secondsection secondsection secondsection secondsection 
                  secondsection secondsection secondsection secondsection secondsection secondsection secondsection 
  
                  secondsection secondsection secondsection secondsection secondsection secondsection secondsection 
                  secondsection secondsection secondsection secondsection secondsection secondsection secondsection 
                  secondsection secondsection secondsection secondsection secondsection secondsection secondsection 
                  secondsection secondsection secondsection secondsection secondsection secondsection secondsection 
              &lt;/p&gt;
              &lt;/div&gt;
  
  
  
  
          &lt;div id="Footer"&gt;
          &lt;p&gt;New Mercy International Church 2016&lt;/p&gt;&lt;br&gt;
  
          &lt;/div&gt;
  
      &lt;/div&gt;&lt;!--End of MainContainer--&gt;
  
  
  
  &lt;/body&gt;
  
  
  
  
  
   body{
              width:100%;
              height:100%;
              background:url(images/glasgow.jpg);
              background-position: center center;
              background-repeat:  no-repeat;
              background-attachment: fixed;
              background-size:  cover;
              background-color: #999;
  
   }
  
   *{
       padding:0px;
       margin:0px;
   }
  
   #MainContainer{
  width:100%;
  height:auto;     
   }
  
   #Header{
       width:100%;
       height:auto;
       position:fixed;
      right: 0;
      top: 0;
      left:0;
      z-index:2;
  }
  
   #share{
       top:102px;
       position:fixed;
       z-index:5;
   }
  
   /*Top Logo*/
   #Logo
   {
      width:115px;
      height:auto;
      float:left;
      margin:15px;
      cursor:pointer;
      position: fixed;
      z-index:1;
   }
  
  
   /*Navigation ul*/
       .nav {
       width:100%;
       background:black;
       line-height:100px;
       position:fixed;
       border-bottom: 2px red solid;
  }
  
   /*Navigation li                     when added, li transition from small to big*/
      nav .nav li{
      list-style-type: none;
      float: right;
      position:relative;  
  }
  
  #NavBar ul:after{content:"";display:block;clear:both}
  
  
   /*Navigation a*/
      nav .nav li a{
      color:white;
      text-decoration: none;
      padding:20px;
  }
  
   /*Navigation a*/
      nav .nav li a:hover{
      color:yellow;
      text-decoration: none;
      padding:px;
      background:blue;
      transition:all 0.8s;
  }
  
  /*Navigation li HOVER                  not sub side border line*/
      nav .nav li:hover{
          width:auto;
       background:black;
       transition:all 0s;
  }
  
  
  /*hide submenu                                                          BLACK PATCH*/
      nav .nav li ul {
      width:auto;
      display: none;
      border-right:2px red solid;
      border-left:2px red solid;
  
  
  }
  
  /*Show submenu at hover*/
      nav .nav li:hover ul {
      width:auto;
      display:block;
      position:absolute;
      top:100px;
      background-color:black;
      border-bottom:2px red solid;
  }
  
  /*Make submenu vertical*/
    nav .nav li ul li{
    width:100%;
    display: block;
    float:none;
    line-height:60px;
    position: relative; 
    z-index: 10; 
  }
  
   /*Navigation sub li*/
      nav .nav li ul li:hover{
      width:auto;
      color:red;
      text-decoration: none;
      background:blue;
  }
  
   /*Navigation a*/
      nav .nav li ul li a:hover{
      width:auto;
      color:yellow;
      text-decoration: none;
      background-color:blue;
  
  }
  
  .nav-btn{display:none;}
  
  .firstsection{
      width:100%;
      min-height:600px;
      margin-top:100px;
      padding-top:50px;
      background:url(images/1.jpg);
      background-position: center center;
      background-repeat:  no-repeat;
      background-attachment: fixed;
      background-size:  cover;
      color: Black;
  }
  
  .secondsection{
          width:100%;
      min-height:500px;
      margin-top:0px;
      padding-top:50px;
      background:url(images/bk2.jpg);
      background-position: center center;
      background-repeat:  no-repeat;
      background-attachment: fixed;
      background-size:  cover;
      color: Black;
  }
  
  .firstsection p {
      width:80%;
      margin: auto;
      display:block;
  }
  
  .secondsection p 
  {
      width:80%;
      margin: auto;
      display:block;
  }
  
  /*Church Family Picture*/
  #ChurchPic{
      width:auto;
      height:auto;
  }
  
  #WelcomeBox {
    width: 100%;
    height: 300px;
    position: relative;
  }
  
  #WelcomeImage {
    max-width: 100%;
    max-height: 200px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }
  
  
  * {box-sizing:border-box}
  
  body {font-family: Verdana,sans-serif;}
      .mySlides {display:none}
  
  /* Slideshow container */
  .slideshow-container {
      max-width: 100%;
      position: relative;
      margin: auto;
      margin-top:50px;
      border-top:2px black solid;
      border-bottom:2px black solid;
  }
  
  /* Caption text */
  .text {
      color: #f2f2f2;
      font-size: 15px;
      padding: 8px 12px;
      position: absolute;
      bottom: 8px;
      width: 100%;
      text-align: center;
  }
  
  /* Number text (1/3 etc) */
  .numbertext {
      color: #f2f2f2;
      font-size: 12px;
      padding: 8px 12px;
      position: absolute;
      top: 0;
  }
  
  /* The dots/bullets/indicators */
  .dot {
      height: 13px;
      width: 13px;
      margin: 0 2px;
      background-color:aqua;
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.6s ease;
  }
  
  .active {
      background-color: #717171;
  }
  
  /* Fading animation */
  .fade {
      -webkit-animation-name: fade;
      -webkit-animation-duration: 1.5s;
      animation-name: fade;
      animation-duration: 1.5s;
  }
  
  @-webkit-keyframes fade {
      from {opacity: .4}
      to {opacity: 1}
  }
  
  @keyframes fade {
      from {opacity: .4}
      to {opacity: 1}
  }
  
  #Footer{
      width:100%;
      background: rgba(255, 255, 255, 0.6);
      color:black;
      font-size:12px;
      font-weight:bold;
      border-top: 2px black solid;
      text-align:center;
  }
  
  
  
  
  
  /*MEDIA QUERIES*/
  
  /*TABLET*/
  @media (max-width: 780px){
  
  /*Navigation a*/
      nav .nav li a{
      padding:10px;
  }
  
  nav .nav li a:hover {
  padding:10px;
  }
  }
  
  /*                                                                    MOBILE PHONE*/
  @media (max-width: 660px){
  
  
      #Logo{
          width:70px;
          right:10px;
              }
  
       #share{
              top:81px;
       right:5px;
      }
  
       /*Navigation a*/
      nav .nav li a:hover{
      color:yellow;
      background:black;
      transition:all 0.0s;
  }
  
  /*Show submenu at hover                                      maybe black patch*/
      nav .nav li:hover ul {
  
  
  }
  
       /*Navigation ul size of ul main menu on mobile*/
       .nav {
       width:60%;
       height:auto;
       background:black;
       line-height:50px;
       position:fixed;
       border-radius:0 0 20px 0;
  }
  
   /*Navigation li size of li in mobile mode*/
      nav .nav li{
      width:100%;
      display:block;
      float: none;
      background-color:gray;
      border-bottom:1px red solid;
  }
  
  
  
   /*Navigation li size of li in mobile mode*/
      nav .nav li:last-child{
      border-radius:0 0 20px 0;
  }
  
  /*                                                                       sub menu background color*/
  nav .nav li ul li{
      width:auto;
      left:30px;
      line-height:30px;
      background-color:orange;
  }
  
  /*                                                                       BLACK PATCH MOBILE SIZE*/
  nav .nav li ul{
  
       border-right:0px red solid;
        border-left:0px red solid;
  }
  
  /*Show submenu at hover                                                           sub test*/
      nav .nav li:hover ul {
      width:50%;
      padding:0px;
      margin:0px;
      left:75px;
      top:10px;
      background-color:black;
  }
  
  
      .nav{
      text-align:left;
      display:none;   
      }
  
      .nav &gt; li{
          display:block;
      }
  
      .nav-btn{
          width:100%;
          height:80px;
          display:block;
          background-color:#333;
          color:#FFF;
          font-size:30px;
          padding-left:10px;
          padding-top:10px;
          text-align:left;
          cursor:pointer; 
      }
  
      .nav-btn:before{
          content: "Menu";
              }
  
  
  
  }
  
  /* On smaller screens, decrease text size */
  @media only screen and (max-width: 300px) {
    .text {font-size: 11px}
  }
  </code></pre>