javascript - Fixed Toggle Menu in One Page Website Issue -

how can stop menu items sliding in front of menu bar? menu items shouldn't sliding in front of menu bar, should drop down, or slide on back... doing wrong? thanks.

here's fiddle

js

//------this slides menu contet down ------:  $(document).ready(function(){   $("#menu-button").click(function(){     $("#menu-items").slidetoggle("slow");   });  //----this brings menu content when item clicked -----:  $('#menu-items li a').on("click", function(){         $('#menu-items').slideup();     });  });  //----this adds smooth scrolling , negative space header compensation ----:  $(document).ready(function () {     $(window).scroll(function () {          var y = $(this).scrolltop();          $('.link').each(function (event) {             if (y >= $($(this).attr('href')).offset().top - 75) {                 $('.link').not(this).removeclass('active');                 $(this).addclass('active');             }         });      }); });   $(function () {     $('a[href*=#]:not([href=#])').click(function () {         if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {             var target = $(this.hash);             target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');             if (target.length) {                 $('html,body').animate({                     scrolltop: (target.offset().top -75)                 }, 850);                 return false;             }         }     }); }); 

css

body, html {     margin: 0px;     padding: 0px;     height: 100%;     width: 100%;         }  * {     margin: 0;     padding: 0; }  section { width: 100%; height: 100%; color: white;} #section01, #section03, #section05 { background: #24354c; }  #section02, #section04, #section06 { background: #374962; }    #header {     width: 100%;     height: 75px;     position: fixed;     background-color: #152233;     top: 0px;     left: 0px; }  #menu-items {     display:none;     list-style: none;     width: 100%;     margin:0;     padding-top: 75px; }  #menu-items li {     border-bottom: 1px solid #297d35;     background-color: #67af32; }  #menu-items li:hover {     background: #4a9529; }  #menu-items li a{     text-decoration: none;     color: #fff;     display: block;     padding: 15px 0px;     font-family: sans-serif;     font-size:16px;     text-align: center; }  #menu-button {     position: absolute;     cursor: pointer;     width: 40px;     height: 40px;     top: 18px;     right: 15px; } 

html

<div id="header">  <img id="menu-button" src="http://downtownkitchenmke.com/wp-content/uploads/2015/07/menubutton.png" alt="menu" border="0" width="340" height="40" />  <ul id="menu-items">     <li><a href="#section01">section 01</a></li>     <li><a href="#section02">section 02</a></li>     <li><a href="#section03">section 03</a></li>     <li><a href="#section04">section 04</a></li>     <li><a href="#section05">section 05</a></li>     <li><a href="#section06">section 06</a></li> </ul>  </div>  <section id="section01"><h1>section 01</h1></section> <section id="section02"><h1>section 02</h1></section> <section id="section03"><h1>section 03</h1></section> <section id="section04"><h1>section 04</h1></section> <section id="section05"><h1>section 05</h1></section> <section id="section06"><h1>section 06</h1></section> 

i add div before dropdown instead of trying use padding-top on menu-items list:

add div 'header-buffer':

<div id='header-buffer'></div>     <ul id="menu-items">    <li><a href="#section01">section 01</a></li>    <li><a href="#section02">section 02</a></li>    <li><a href="#section03">section 03</a></li>    <li><a href="#section04">section 04</a></li>    <li><a href="#section05">section 05</a></li>    <li><a href="#section06">section 06</a></li> </ul> 

remove padding "menu-items" , add height "header-buffer":

#menu-items {  display:none;  list-style: none;  width: 100%; }  #header-buffer {     width: 100%;  height:75px }