title: Drop down menu pushing content down
body: <p>Good day, I made a blog on blogger and put some drop down menu codes from CSS-Tricks <a href="https://css-tricks.com/long-dropdowns-solution/" rel="nofollow noreferrer">https://css-tricks.com/long-dropdowns-solution/</a>. I tried changing the position and z-index codes but I can't make it stop pushing the content down. I've read the tutorials and applied the absolute, relative and fixed options for the position and even changing the z-index numbers, still can't find how to fix it. The dropdown works on the average menu but for the long one's it's messing with the photo.</p>
  
  <p>This is my blog <a href="https://treeplantersph.blogspot.com/" rel="nofollow noreferrer">https://treeplantersph.blogspot.com/</a>. The drop down menu is quite useful because it moves up and down without a scrollbar. Really helpful for viewers. Big big thanks for advice to solve my blog issue.</p>
  
  <p>This is the codes I used:</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-css lang-css prettyprint-override"><code>     &lt;style type="text/css" style="display: none !important;"&gt;
          * {
              margin: 0;
              padding: 0;
          }
          body {
              overflow-x: hidden;
          }
          #demo-top-bar {
              text-align: left;
              background: #222;
              position: relative;
              zoom: 1;
              width: 100% !important;
              z-index:6000;
              padding: 20px 0 20px;
          }
          #demo-bar-inside {
              width: 960px;
              margin: 0 auto;
              position: relative;
              overflow: hidden;
          }
          #demo-bar-buttons {
              padding-top: 10px;
              float: right;
          }
          #demo-bar-buttons a {
              font-size: 12px;
              margin-left: 20px;
              color: white;
              margin: 2px 0;
              text-decoration: none;
              font: 14px "Lucida Grande", Sans-Serif !important;
          }
          #demo-bar-buttons a:hover,
          #demo-bar-buttons a:focus {
              text-decoration: underline;
          }
          #demo-bar-badge {
              display: inline-block;
              width: 302px;
              padding: 0 !important;
              margin: 0 !important;
              background-color: transparent !important;
          }
          #demo-bar-badge a {
              display: block;
              width: 100%;
              height: 38px;
              border-radius: 0;
              bottom: auto;
              margin: 0;
              background: url(/images/examples-logo.png) no-repeat;
              background-size: 100%;
              overflow: hidden;
              text-indent: -9999px;
          }
          #demo-bar-badge:before, #demo-bar-badge:after {
              display: none !important;
          }
      
      *                                     { margin: 0; padding: 0; }
      body                                { font: 15px Helvetica, Sans-Serif; } 
      html                                { overflow-y: scroll; }
      #page-wrap                            { width: 720px; margin: 25px auto; } 
      p                                   { margin: 0 0 8px 0; }
      a                                    { text-decoration: none; }
      img                                 { vertical-align: middle; }
      a img                               { border: 0; 180}
      ul                                    { list-style: none; }
      h1                                  { margin: 0 0 10px 0; }
      
      &lt;/style&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  
      
          &lt;link rel="stylesheet" href="https://css-tricks.com/examples/LongDropdowns/css/style.css" type="text/css" media="screen, projection"/&gt;
      
          &lt;script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'&gt;&lt;/script&gt;
          &lt;script type="text/javascript" language="javascript" src="https://css-tricks.com/examples/LongDropdowns/js/jquery.dropdown.js"&gt;&lt;/script&gt;    
      
      
          &lt;div id="page-wrap"&gt;        
              &lt;ul class="dropdown"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Really Tall Menu&lt;img src="https://css-tricks.com/examples/LongDropdowns/images/down-arrow.png" /&gt;&lt;/a&gt;
                      &lt;ul class="sub_menu"&gt;
                           &lt;li&gt;&lt;a href="#"&gt;Artificial Turf&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;Benches &amp;amp; Bleachers&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;Communication Devices&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;Dugouts&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;Fencing &amp;amp; Windscreen&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;Floor Protectors&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;Foul Poles&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;Netting&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;Outdoor Furniture &amp;amp; Storage&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;Outdoor Signs&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;Padding&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;Scoreboards&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;Shade Structures&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;Artificial Turf&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;Benches &amp;amp; Bleachers&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;Communication Devices&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;Dugouts&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;Fencing &amp;amp; Windscreen&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;Floor Protectors&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;Foul Poles&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;Netting&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;Outdoor Furniture &amp;amp; Storage&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;Outdoor Signs&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;Padding&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;Scoreboards&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;Shade Structures&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;Artificial Turf&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;Benches &amp;amp; Bleachers&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;Communication Devices&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;Dugouts&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;Fencing &amp;amp; Windscreen&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;Floor Protectors&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;Foul Poles&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;Netting&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;Outdoor Furniture &amp;amp; Storage&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;Outdoor Signs&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;Padding&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;Scoreboards&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;Shade Structures&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Kinda Tall Menu&lt;/a&gt;
                      &lt;ul class="sub_menu"&gt;
                           &lt;li&gt;&lt;a href="#"&gt;Artificial Turf&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;Benches &amp;amp; Bleachers&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;Communication Devices&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;Dugouts&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;Fencing &amp;amp; Windscreen&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;Floor Protectors&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;Foul Poles&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;Netting&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;Outdoor Furniture &amp;amp; Storage&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;Outdoor Signs&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;Padding&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;Scoreboards&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Average Menu&lt;/a&gt;
                      &lt;ul class="sub_menu"&gt;
                           &lt;li&gt;&lt;a href="#"&gt;Artificial Turf&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;Benches &amp;amp; Bleachers&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;Communication Devices&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;Dugouts&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;Fencing &amp;amp; Windscreen&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;No Menu&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
      
          &lt;/div&gt;
      
  
      </code></pre>
  </div>
  </div>
  </p>