title: Jquery Horizontal Accordion Webkit Bug
body: <p>I'm trying to build a horizontal accordion with Jquery.  It seems to be working "ok" in Firefox.  But in Webkit (Safari 3 + 4, and Chrome) the sub-level UL flashes after the Hide function.  Any help would be greatly appreciated. To see a working demo: <a href="http://ableobject.com/horaccordion1.html" rel="nofollow noreferrer">http://ableobject.com/horaccordion1.html</a></p>
  
  <p>Here is what I'm working on:</p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt;
      &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"&gt;&lt;/script&gt;
  
      &lt;title&gt;untitled&lt;/title&gt;
      &lt;style type="text/css"&gt;
      #container {
          display: table; 
          margin: 0 auto; 
          text-align: center; /* for IE */
      }
              ul{
                      list-style: none;
                      background-color: yellow;
                      margin: 0;
                      padding: 0;
                      float: left;
                      height: 20px; /* For testing */     
              }
              ul li {
                     background-color: aqua;
                      float: left;
              }
              ul li ul {
                     background-color: blue;
                      display: none;
              }
              ul li ul li {
                     background-color: green;
              }
              a, a:link, a:hover, a:visited, a:active {
                      color: black;
                      text-decoration: none;
                      float: left;
              }
      &lt;/style&gt;
  
     &lt;script type="text/javascript"&gt;
  /* Care of Hunter Daley */
      var $current = null;
          $(document).ready(function(){
           $("ul li ul").hide();  // hide submenus by default on load
  
             $("ul li a").click(function(){
                var $sub = $(this).next(); 
                if ($sub.css("display") == "none")
                {
                   if ($current != null)
                      $current.animate({ width: 'hide' }); // if you want to only show one sub at a time
                   $sub.animate({ width: 'show' }); 
                   $current = $sub;
                }
                else
                {
                   $sub.animate({ width: 'hide' });
                   $current = null;
                }
             });
          });
      &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="container"&gt;
      &lt;ul&gt;
              &lt;li&gt;
                      &lt;a href="#"&gt;Top-level 1&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                      &lt;a href="#"&gt;Top-level 2&lt;/a&gt;
  
                      &lt;ul&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Bottom Level A1&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Bottom Level A2&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Bottom Level A3&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Bottom Level A4&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
              &lt;/li&gt;
  
              &lt;li&gt;
                      &lt;a href="#"&gt;Top-level 3&lt;/a&gt;
                      &lt;ul&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Bottom Level B1&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Bottom Level B2&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
              &lt;/li&gt;
  
              &lt;li&gt;
                      &lt;a href="#"&gt;Top-level 4&lt;/a&gt;
              &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>