title: CSS styled lists UL LI - ( sprites ) loading jumpy
body: <p>Thanks everyone for taking the time to read this.</p>
  
  <p>I have styled my navigation bar and a few other things on my website using lists.  For example...</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li id="n1"&gt;&lt;a href="http://www.beaconrecords.com/index.php"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li id="n2"&gt;&lt;a href="artists"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li id="n3"&gt;&lt;a href="lifestyle.php"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li id="n4"&gt;&lt;a href="events.php"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li id="n5"&gt;&lt;a href="shop.php"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li id="n6"&gt;&lt;a href="contact.php"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li id="n7"&gt;&lt;a href="about.php"&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>It works perfectly, but when it loads, it kind of like breathes.  It starts off shrunken in a little bit, and then expands to its properly place after a second.  I do not know what is causing this problem, and I don't think it's due to the way I styled the list, as I will show.</p>
  
  <p>This is the website with the problem.
  <a href="http://beaconrecords.com/" rel="nofollow">http://beaconrecords.com/</a></p>
  
  <p>here is a test link that doesn't have the problem.
  <a href="http://beaconrecords.com/wp-content/themes/br/test.php" rel="nofollow">http://beaconrecords.com/wp-content/themes/br/test.php</a></p>