title: z-index not working during fadeIn fadeOut transitions, resolves after transition completes
body: <p>I'm fading in and out some list items to create a news ticker using the following code.</p>
  
  <p>jQuery:</p>
  
  <pre><code>$(function () {
  var list_slideshow = $("#ticker"),
      listItems = list_slideshow.children('li'),
      listLen = listItems.length,
      i = 0,
      changeList = function () {
  
          listItems.eq(i).fadeOut(600, function () {
              i += 1;
              if (i === listLen) {
                  i = 0;
              }
              listItems.eq(i).fadeIn(600);
          });
      };
  listItems.not(':first').hide();
  setInterval(changeList, 8000);
  });
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.ticker-wrap {
   background-color: #ccc;
   }
  
   ul#ticker {
  font-size: 1.2em;
  padding: .43em;
   }
  
   ul#ticker li {
  color: #fff;
   }
  </code></pre>
  
  <p>It's all working great until I open up a dropdown menu above it and then the current li list item shows above the menu (not the UL background), only during the fadeIn fadeOut transition. Once the transition has resolved the list item returns to the correct z-index until the next fadeIn fadeOut starts.</p>
  
  <p>I've checked the z-index on the navigation all set to z-index 9999 and it has no issues with anything else on the screen.</p>
  
  <p>Any ideas on how I can these list items to stay behind the navigation whilst they are transitioning?</p>
  
  <p>Many thanks</p>
  
  <p><strong>Update:</strong> Here's a jsFiddle <a href="http://jsfiddle.net/leanda/eetyv/" rel="nofollow">http://jsfiddle.net/leanda/eetyv/</a></p>