title: The jquery accordion overlaps the content of my header
body: <p>I am using the jquery accordion source for my website and what happens when I scroll down is the accordion overlaps my header. </p>
  
  <p>I haven't made any adjustments to the CSS code in the accordion class so I don't have much to show but I've read a lot of people complaining that the accordion source from jquery UI has this problem but I have not been able to find out what it is? </p>
  
  <p>Any ideas? Thanks!</p>
  
  <pre><code>&lt;script&gt;
  JQuery(document).ready(function(){
  $("#accordion").accordion(); 
  });
  &lt;/script&gt;
  
  &lt;/a&gt;
  &lt;/div&gt;
  &lt;nav class="nav"&gt; 
      &lt;div class="padded"&gt; 
      &lt;ul&gt; 
          &lt;li class="active"&gt;&lt;a id="link1" class="nav-section1" href="#section1"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a id="link2" class="nav-section2" href="#section2"&gt;Design&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a id="link3" class="nav-section3" href="#section3"&gt;3D + Animation&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a id="link5" class="nav-section5" href="#section5"&gt;Video Production&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a id="link6" class="nav-section6" href="#section6"&gt;Contact&lt;/a&gt;&lt;/li&gt;
          &lt;li class="scrollTop"&gt;&lt;a href="#"&gt;&lt;span class="entypo-up-open"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;         
      &lt;/ul&gt;
      &lt;/div&gt;   
   &lt;/nav&gt;
  
  
  &lt;div class = "accordion"&gt;   
   &lt;article&gt; 
      &lt;h1 id="section1"&gt;About&lt;/h1&gt;
      &lt;p&gt;Farman Pirzada is this one dude who's pretty awesome and there's a lot you should learn about him because I love him&lt;/p&gt;
  
      &lt;/p&gt;
   &lt;/article&gt;
  </code></pre>
  
  <p>and here's the CSS</p>
  
  <pre><code> #accordion { 
   padding-left: 100px;
   }
  </code></pre>
  
  <p><a href="http://imgur.com/EaQOT0g" rel="nofollow">http://imgur.com/EaQOT0g</a></p>