title: drop-down menu cut off
body: <p>down menu cuts off when I hover on the menu. I'm assuming it has something to do with how tall my header section is but I do not what to make the header section bigger I just want to see my drop-down section over the header. I tried doing a z-index and it didn't work. I might be putting it in the wrong place but I'm not sure. If anyone has any suggestions on how to fix this issue please let me know! </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>;(function ($, document, window) {
      var
      // default settings object.
          defaults = {
              label: 'MENU',
              duplicate: true,
              duration: 200,
              easingOpen: 'swing',
              easingClose: 'swing',
              closedSymbol: '&amp;#9658;',
              openedSymbol: '&amp;#9660;',
              prependTo: 'body',
              appendTo: '',
              parentTag: 'a',
              closeOnClick: false,
              allowParentLinks: false,
              nestedParentLinks: true,
              showChildren: false,
              removeIds: true,
              removeClasses: false,
              removeStyles: false,
     brand: '',
              animations: 'jquery',
              init: function () {},
              beforeOpen: function () {},
              beforeClose: function () {},
              afterOpen: function () {},
              afterClose: function () {}
          },
          mobileMenu = 'slicknav',
          prefix = 'slicknav',
  
          Keyboard = {
              DOWN: 40,
              ENTER: 13,
              ESCAPE: 27,
              LEFT: 37,
              RIGHT: 39,
              SPACE: 32,
              TAB: 9,
              UP: 38,
          };
  
      function Plugin(element, options) {
          this.element = element;
  
          // jQuery has an extend method which merges the contents of two or
          // more objects, storing the result in the first object. The first object
          // is generally empty as we don't want to alter the default options for
          // future instances of the plugin
          this.settings = $.extend({}, defaults, options);
  
          // Don't remove IDs by default if duplicate is false
          if (!this.settings.duplicate &amp;&amp; !options.hasOwnProperty("removeIds")) {
            this.settings.removeIds = false;
          }
  
          this._defaults = defaults;
          this._name = mobileMenu;
  
          this.init();
      }
  
      Plugin.prototype.init = function () {
          var $this = this,
              menu = $(this.element),
              settings = this.settings,
              iconClass,
              menuBar;
  
          // clone menu if needed
          if (settings.duplicate) {
              $this.mobileNav = menu.clone();
          } else {
              $this.mobileNav = menu;
          }
  
          // remove IDs if set
          if (settings.removeIds) {
            $this.mobileNav.removeAttr('id');
            $this.mobileNav.find('*').each(function (i, e) {
                $(e).removeAttr('id');
            });
          }
  
          // remove classes if set
          if (settings.removeClasses) {
              $this.mobileNav.removeAttr('class');
              $this.mobileNav.find('*').each(function (i, e) {
                  $(e).removeAttr('class');
              });
          }
  
          // remove styles if set
          if (settings.removeStyles) {
              $this.mobileNav.removeAttr('style');
              $this.mobileNav.find('*').each(function (i, e) {
                  $(e).removeAttr('style');
              });
          }
  
          // styling class for the button
          iconClass = prefix + '_icon';
  
          if (settings.label === '') {
              iconClass += ' ' + prefix + '_no-text';
          }
  
          if (settings.parentTag == 'a') {
              settings.parentTag = 'a href="#"';
          }
  
          // create menu bar
          $this.mobileNav.attr('class', prefix + '_nav');
          menuBar = $('&lt;div class="' + prefix + '_menu"&gt;&lt;/div&gt;');
    if (settings.brand !== '') {
     var brand = $('&lt;div class="' + prefix + '_brand"&gt;'+settings.brand+'&lt;/div&gt;');
     $(menuBar).append(brand);
    }
          $this.btn = $(
              ['&lt;' + settings.parentTag + ' aria-haspopup="true" role="button" tabindex="0" class="' + prefix + '_btn ' + prefix + '_collapsed"&gt;',
                  '&lt;span class="' + prefix + '_menutxt"&gt;' + settings.label + '&lt;/span&gt;',
                  '&lt;span class="' + iconClass + '"&gt;',
                      '&lt;span class="' + prefix + '_icon-bar"&gt;&lt;/span&gt;',
                      '&lt;span class="' + prefix + '_icon-bar"&gt;&lt;/span&gt;',
                      '&lt;span class="' + prefix + '_icon-bar"&gt;&lt;/span&gt;',
                  '&lt;/span&gt;',
              '&lt;/' + settings.parentTag + '&gt;'
              ].join('')
          );
          $(menuBar).append($this.btn);
          if(settings.appendTo !== '') {
              $(settings.appendTo).append(menuBar);
          } else {
              $(settings.prependTo).prepend(menuBar);
          }
          menuBar.append($this.mobileNav);
  
          // iterate over structure adding additional structure
          var items = $this.mobileNav.find('li');
          $(items).each(function () {
              var item = $(this),
                  data = {};
              data.children = item.children('ul').attr('role', 'menu');
              item.data('menu', data);
  
              // if a list item has a nested menu
              if (data.children.length &gt; 0) {
  
                  // select all text before the child menu
                  // check for anchors
  
                  var a = item.contents(),
                      containsAnchor = false,
                      nodes = [];
  
                  $(a).each(function () {
                      if (!$(this).is('ul')) {
                          nodes.push(this);
                      } else {
                          return false;
                      }
  
                      if($(this).is("a")) {
                          containsAnchor = true;
                      }
                  });
  
                  var wrapElement = $(
                      '&lt;' + settings.parentTag + ' role="menuitem" aria-haspopup="true" tabindex="-1" class="' + prefix + '_item"/&gt;'
                  );
  
                  // wrap item text with tag and add classes unless we are separating parent links
                  if ((!settings.allowParentLinks || settings.nestedParentLinks) || !containsAnchor) {
                      var $wrap = $(nodes).wrapAll(wrapElement).parent();
                      $wrap.addClass(prefix+'_row');
                  } else
                      $(nodes).wrapAll('&lt;span class="'+prefix+'_parent-link '+prefix+'_row"/&gt;').parent();
  
                  if (!settings.showChildren) {
                      item.addClass(prefix+'_collapsed');
                  } else {
                      item.addClass(prefix+'_open');
                  }
  
                  item.addClass(prefix+'_parent');
  
                  // create parent arrow. wrap with link if parent links and separating
                  var arrowElement = $('&lt;span class="'+prefix+'_arrow"&gt;'+(settings.showChildren?settings.openedSymbol:settings.closedSymbol)+'&lt;/span&gt;');
  
                  if (settings.allowParentLinks &amp;&amp; !settings.nestedParentLinks &amp;&amp; containsAnchor)
                      arrowElement = arrowElement.wrap(wrapElement).parent();
  
                  //append arrow
                  $(nodes).last().after(arrowElement);
  
  
              } else if ( item.children().length === 0) {
                   item.addClass(prefix+'_txtnode');
              }
  
              // accessibility for links
              item.children('a').attr('role', 'menuitem').click(function(event){
                  //Ensure that it's not a parent
                  if (settings.closeOnClick &amp;&amp; !$(event.target).parent().closest('li').hasClass(prefix+'_parent')) {
                          //Emulate menu close if set
                          $($this.btn).click();
                      }
              });
  
              //also close on click if parent links are set
              if (settings.closeOnClick &amp;&amp; settings.allowParentLinks) {
                  item.children('a').children('a').click(function (event) {
                      //Emulate menu close
                      $($this.btn).click();
                  });
  
                  item.find('.'+prefix+'_parent-link a:not(.'+prefix+'_item)').click(function(event){
                      //Emulate menu close
                          $($this.btn).click();
                  });
              }
          });
  
          // structure is in place, now hide appropriate items
          $(items).each(function () {
              var data = $(this).data('menu');
              if (!settings.showChildren){
                  $this._visibilityToggle(data.children, null, false, null, true);
              }
          });
  
          // finally toggle entire menu
          $this._visibilityToggle($this.mobileNav, null, false, 'init', true);
  
          // accessibility for menu button
          $this.mobileNav.attr('role','menu');
  
          // outline prevention when using mouse
          $(document).mousedown(function(){
              $this._outlines(false);
          });
  
          $(document).keyup(function(){
              $this._outlines(true);
          });
  
          // menu button click
          $($this.btn).click(function (e) {
              e.preventDefault();
              $this._menuToggle();
          });
  
          // click on menu parent
          $this.mobileNav.on('click', '.' + prefix + '_item', function (e) {
              e.preventDefault();
              $this._itemClick($(this));
          });
  
          // check for keyboard events on menu button and menu parents
          $($this.btn).keydown(function (e) {
              var ev = e || event;
  
              switch(ev.keyCode) {
                  case Keyboard.ENTER:
                  case Keyboard.SPACE:
                  case Keyboard.DOWN:
                      e.preventDefault();
                      if (ev.keyCode !== Keyboard.DOWN || !$($this.btn).hasClass(prefix+'_open')){
                          $this._menuToggle();
                      }
                      
                      $($this.btn).next().find('[role="menuitem"]').first().focus();
                      break;
              }
  
              
          });
  
          $this.mobileNav.on('keydown', '.'+prefix+'_item', function(e) {
              var ev = e || event;
  
              switch(ev.keyCode) {
                  case Keyboard.ENTER:
                      e.preventDefault();
                      $this._itemClick($(e.target));
                      break;
                  case Keyboard.RIGHT:
                      e.preventDefault();
                      if ($(e.target).parent().hasClass(prefix+'_collapsed')) {
                          $this._itemClick($(e.target));
                      }
                      $(e.target).next().find('[role="menuitem"]').first().focus();
                      break;
              }
          });
  
          $this.mobileNav.on('keydown', '[role="menuitem"]', function(e) {
              var ev = e || event;
  
              switch(ev.keyCode){
                  case Keyboard.DOWN:
                      e.preventDefault();
                      var allItems = $(e.target).parent().parent().children().children('[role="menuitem"]:visible');
                      var idx = allItems.index( e.target );
                      var nextIdx = idx + 1;
                      if (allItems.length &lt;= nextIdx) {
                          nextIdx = 0;
                      }
                      var next = allItems.eq( nextIdx );
                      next.focus();
                  break;
                  case Keyboard.UP:
                      e.preventDefault();
                      var allItems = $(e.target).parent().parent().children().children('[role="menuitem"]:visible');
                      var idx = allItems.index( e.target );
                      var next = allItems.eq( idx - 1 );
                      next.focus();
                  break;
                  case Keyboard.LEFT:
                      e.preventDefault();
                      if ($(e.target).parent().parent().parent().hasClass(prefix+'_open')) {
                          var parent = $(e.target).parent().parent().prev();
                          parent.focus();
                          $this._itemClick(parent);
                      } else if ($(e.target).parent().parent().hasClass(prefix+'_nav')){
                          $this._menuToggle();
                          $($this.btn).focus();
                      }
                      break;
                  case Keyboard.ESCAPE:
                      e.preventDefault();
                      $this._menuToggle();
                      $($this.btn).focus();
                      break;    
              }
          });
  
          // allow links clickable within parent tags if set
          if (settings.allowParentLinks &amp;&amp; settings.nestedParentLinks) {
              $('.'+prefix+'_item a').click(function(e){
                      e.stopImmediatePropagation();
              });
          }
      };
  
      //toggle menu
      Plugin.prototype._menuToggle = function (el) {
          var $this = this;
          var btn = $this.btn;
          var mobileNav = $this.mobileNav;
  
          if (btn.hasClass(prefix+'_collapsed')) {
              btn.removeClass(prefix+'_collapsed');
              btn.addClass(prefix+'_open');
          } else {
              btn.removeClass(prefix+'_open');
              btn.addClass(prefix+'_collapsed');
          }
          btn.addClass(prefix+'_animating');
          $this._visibilityToggle(mobileNav, btn.parent(), true, btn);
      };
  
      // toggle clicked items
      Plugin.prototype._itemClick = function (el) {
          var $this = this;
          var settings = $this.settings;
          var data = el.data('menu');
          if (!data) {
              data = {};
              data.arrow = el.children('.'+prefix+'_arrow');
              data.ul = el.next('ul');
              data.parent = el.parent();
              //Separated parent link structure
              if (data.parent.hasClass(prefix+'_parent-link')) {
                  data.parent = el.parent().parent();
                  data.ul = el.parent().next('ul');
              }
              el.data('menu', data);
          }
          if (data.parent.hasClass(prefix+'_collapsed')) {
              data.arrow.html(settings.openedSymbol);
              data.parent.removeClass(prefix+'_collapsed');
              data.parent.addClass(prefix+'_open');
              data.parent.addClass(prefix+'_animating');
              $this._visibilityToggle(data.ul, data.parent, true, el);
          } else {
              data.arrow.html(settings.closedSymbol);
              data.parent.addClass(prefix+'_collapsed');
              data.parent.removeClass(prefix+'_open');
              data.parent.addClass(prefix+'_animating');
              $this._visibilityToggle(data.ul, data.parent, true, el);
          }
      };
  
      // toggle actual visibility and accessibility tags
      Plugin.prototype._visibilityToggle = function(el, parent, animate, trigger, init) {
          var $this = this;
          var settings = $this.settings;
          var items = $this._getActionItems(el);
          var duration = 0;
          if (animate) {
              duration = settings.duration;
          }
          
          function afterOpen(trigger, parent) {
              $(trigger).removeClass(prefix+'_animating');
              $(parent).removeClass(prefix+'_animating');
  
              //Fire afterOpen callback
              if (!init) {
                  settings.afterOpen(trigger);
              }
          }
          
          function afterClose(trigger, parent) {
              el.attr('aria-hidden','true');
              items.attr('tabindex', '-1');
              $this._setVisAttr(el, true);
              el.hide(); //jQuery 1.7 bug fix
  
              $(trigger).removeClass(prefix+'_animating');
              $(parent).removeClass(prefix+'_animating');
  
              //Fire init or afterClose callback
              if (!init){
                  settings.afterClose(trigger);
              } else if (trigger == 'init'){
                  settings.init();
              }
          }
  
          if (el.hasClass(prefix+'_hidden')) {
              el.removeClass(prefix+'_hidden');
               //Fire beforeOpen callback
              if (!init) {
                  settings.beforeOpen(trigger);
              }
              if (settings.animations === 'jquery') {
                  el.stop(true,true).slideDown(duration, settings.easingOpen, function(){
                      afterOpen(trigger, parent);
                  });
              } else if(settings.animations === 'velocity') {
                  el.velocity("finish").velocity("slideDown", {
                      duration: duration,
                      easing: settings.easingOpen,
                      complete: function() {
                          afterOpen(trigger, parent);
                      }
                  });
              }
              el.attr('aria-hidden','false');
              items.attr('tabindex', '0');
              $this._setVisAttr(el, false);
          } else {
              el.addClass(prefix+'_hidden');
  
              //Fire init or beforeClose callback
              if (!init){
                  settings.beforeClose(trigger);
              }
  
              if (settings.animations === 'jquery') {
                  el.stop(true,true).slideUp(duration, this.settings.easingClose, function() {
                      afterClose(trigger, parent)
                  });
              } else if (settings.animations === 'velocity') {
                  
                  el.velocity("finish").velocity("slideUp", {
                      duration: duration,
                      easing: settings.easingClose,
                      complete: function() {
                          afterClose(trigger, parent);
                      }
                  });
              }
          }
      };
  
      // set attributes of element and children based on visibility
      Plugin.prototype._setVisAttr = function(el, hidden) {
          var $this = this;
  
          // select all parents that aren't hidden
          var nonHidden = el.children('li').children('ul').not('.'+prefix+'_hidden');
  
          // iterate over all items setting appropriate tags
          if (!hidden) {
              nonHidden.each(function(){
                  var ul = $(this);
                  ul.attr('aria-hidden','false');
                  var items = $this._getActionItems(ul);
                  items.attr('tabindex', '0');
                  $this._setVisAttr(ul, hidden);
              });
          } else {
              nonHidden.each(function(){
                  var ul = $(this);
                  ul.attr('aria-hidden','true');
                  var items = $this._getActionItems(ul);
                  items.attr('tabindex', '-1');
                  $this._setVisAttr(ul, hidden);
              });
          }
      };
  
      // get all 1st level items that are clickable
      Plugin.prototype._getActionItems = function(el) {
          var data = el.data("menu");
          if (!data) {
              data = {};
              var items = el.children('li');
              var anchors = items.find('a');
              data.links = anchors.add(items.find('.'+prefix+'_item'));
              el.data('menu', data);
          }
          return data.links;
      };
  
      Plugin.prototype._outlines = function(state) {
          if (!state) {
              $('.'+prefix+'_item, .'+prefix+'_btn').css('outline','none');
          } else {
              $('.'+prefix+'_item, .'+prefix+'_btn').css('outline','');
          }
      };
  
      Plugin.prototype.toggle = function(){
          var $this = this;
          $this._menuToggle();
      };
  
      Plugin.prototype.open = function(){
          var $this = this;
          if ($this.btn.hasClass(prefix+'_collapsed')) {
              $this._menuToggle();
          }
      };
  
      Plugin.prototype.close = function(){
          var $this = this;
          if ($this.btn.hasClass(prefix+'_open')) {
              $this._menuToggle();
          }
      };
  
      $.fn[mobileMenu] = function ( options ) {
          var args = arguments;
  
          // Is the first parameter an object (options), or was omitted, instantiate a new instance
          if (options === undefined || typeof options === 'object') {
              return this.each(function () {
  
                  // Only allow the plugin to be instantiated once due to methods
                  if (!$.data(this, 'plugin_' + mobileMenu)) {
  
                      // if it has no instance, create a new one, pass options to our plugin constructor,
                      // and store the plugin instance in the elements jQuery data object.
                      $.data(this, 'plugin_' + mobileMenu, new Plugin( this, options ));
                  }
              });
  
          // If is a string and doesn't start with an underscore or 'init' function, treat this as a call to a public method.
          } else if (typeof options === 'string' &amp;&amp; options[0] !== '_' &amp;&amp; options !== 'init') {
  
              // Cache the method call to make it possible to return a value
              var returns;
  
              this.each(function () {
                  var instance = $.data(this, 'plugin_' + mobileMenu);
  
                  // Tests that there's already a plugin-instance and checks that the requested public method exists
                  if (instance instanceof Plugin &amp;&amp; typeof instance[options] === 'function') {
  
                      // Call the method of our plugin instance, and pass it the supplied arguments.
                      returns = instance[options].apply( instance, Array.prototype.slice.call( args, 1 ) );
                  }
              });
  
              // If the earlier cached method gives a value back return the value, otherwise return this to preserve chainability.
              return returns !== undefined ? returns : this;
          }
      };
  }(jQuery, document, window));</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.dropdown{
   overflow: hidden;
  }
  
  .dropdown .dropbtn {
   background-color: inherit;
   
  }
  
  
  .dropdown-content{
   display: none;
   position: absolute;
   z-index:2000;
  }
  
  .dropdown-content a{
   
   float:none;
   display: block;
   
  }
  
  .dropdown:hover .dropdown-content{
   display:block;
  }
  .dropbtn{
   border:none;
   font-family: 'Philosopher', sans-serif;
   z-index: 3000;
  }
  
  header{
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #333;
      position: fixed;
      top: 0;
      width: 100%;
   z-index:1000;
   
  }
  
  #logowheader{
   background: url(footer_lodyas.png) no-repeat fixed;
   background-size: cover;
   background-position: center center;
  }
  
  
  @media (max-width: 400px) {
   
   
   
  
   
   
   
   .slicknav_menu{
   display:block;
    z-index: 1000;
  
   
    
  }
   
  
   
  header{
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #333;
      position: fixed;
      top: 0;
      width: 100%;
   z-index: 1000;
   
  }
  
   
   #menu{
    display:none;
    z-index: 1000;
    
   }
   
   .slicknav_menu img{
    display:none;
    z-index: 1000;
  
   }
  }
  
  .main-nav {
  
    display: flex;
   padding-left: 0;
   font-family: 'Philosopher', sans-serif;
   padding-left:20px;
   padding-right:40px;
   z-index: 1000;
  
   
   }
  .main-nav a:hover{
  color: white; 
  }
  
  .main-nav a:after{
   content: attr(data-txthover);
      max-width: 100%; 
      color: white;
      white-space: nowrap;
      overflow: hidden;
      transition: max-width .3s ease-out;
  }
  
  .main-nav li:first-child {
  margin-right: auto;
   
  
  }
  .main-nav a {
   color: #1FA0A3;
   padding: 10px;
   text-decoration: none;
   font-size: 20px;
   transition: all .3s;
   z-index: 1000;
   /*display: block*/
  }
  
  #logo {
  width: 50px;
  text-decoration: none;
   
  }
  
  .main-nav li{
   list-style: none;
   text-decoration: none;
   
  }
  
  #logowheader{
   
   width:300px;
   padding-left: 0;
   
   
  }
  
  #vp{
   color: white;
   
   margin-left: auto;
      margin-right: auto;
   display: block;
   text-align: center;
   padding-bottom:20px;
   line-height: 25px;
   margin-right:20px;
   }
  
  html, body {
   width:100%;
   height:100%;
  }
  
  .center{
   margin-top: 150px;;
   margin-left: auto;
      margin-right: auto;
   display: block;
   
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header&gt;
  
  &lt;script
       src="https://code.jquery.com/jquery-1.11.3.min.js"
       integrity="sha256-7LkWEzqTdpEfELxcZZlS6wAx5Ff13zZ83lYO2/ujj7g="
       crossorigin="anonymous"&gt;&lt;/script&gt;             
  &lt;script src="SlickNav-master/dist/jquery.slicknav.js"&gt;&lt;/script&gt;  
              
  &lt;script&gt;
   $(function(){
    $('#menu').slicknav();
   });
  &lt;/script&gt;
  &lt;nav&gt;
  &lt;div id="fix"&gt;
  &lt;ul class="main-nav" id="menu"&gt;
   &lt;li&gt;&lt;a href="portfolio.html" class="logo"&gt;&lt;img id="logo" src="logo.svg" alt="logo"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#logowheader"&gt;Home&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="#recent"&gt;Skills&lt;/a&gt;&lt;/li&gt;
      &lt;div class="dropdown"&gt;
         &lt;button class="dropbtn"&gt;
          &lt;li&gt;&lt;a href="#description"&gt;About&lt;/a&gt;&lt;/li&gt;&lt;/button&gt;
          &lt;div class="dropdown-content"&gt;
           &lt;a href="#"&gt;Work&lt;/a&gt;
           &lt;a href="#"&gt;Education&lt;/a&gt;
           
          &lt;/div&gt;
          
          &lt;/div&gt;
         &lt;li&gt;&lt;a href="#iwant"&gt;Contact&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;&lt;/div&gt;
   &lt;/nav&gt;&lt;/header&gt;</code></pre>
  </div>
  </div>
  </p>