title: Why the 3rd li element is always focused when load the page?
body: <p>I'm creating a simple site that has menu and a submenu. When the page is loaded, it's showing Re-Board and its submenu just like it has been hovered from nowhere. I want the Home <code>li</code> to be the default menu when the page is loaded. What's the problem? I have checked my css and js files and done some testing but the problem stills exist. Please help. Many thanks !!!</p>
  
  <p>The HTML structure is like this.</p>
  
  <pre><code>&lt;ul id="topnav"&gt;
      &lt;li style=""&gt;&lt;a href=""&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;
          &lt;a href=""&gt;Company&lt;/a&gt;
          &lt;span&gt;
              &lt;a href=""&gt;The Company&lt;/a&gt; |
              &lt;a href=""&gt;The Team&lt;/a&gt; |
              &lt;a href=""&gt;Careers&lt;/a&gt;
          &lt;/span&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href=""&gt;Re-Board&lt;/a&gt;
          &lt;span&gt;
              &lt;a href=""&gt;What We Do&lt;/a&gt; |
              &lt;a href=""&gt;Our Process&lt;/a&gt; |
              &lt;a href=""&gt;Testimonials&lt;/a&gt;
              &lt;/span&gt;
              &lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Design Database&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;New&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Catalog&lt;/a&gt;&lt;/li&gt;
      &lt;li class="none-b"&gt;&lt;a href=""&gt;Contact us&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>My full code :)</p>
  
  <p><a href="http://jsfiddle.net/X9DwY/" rel="nofollow">http://jsfiddle.net/X9DwY/</a></p>