title: Bootstrap's navbar pull class creating issues
body: <p>Here is the important part of my code:</p>
  
  <pre><code>&lt;div class="nav-collapse"&gt;
    &lt;ul class="nav"&gt;
      &lt;li class="navItem active"&gt;&lt;a href="#homePage" data-toggle="tab"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li class="navItem"&gt;&lt;a href="#" data-toggle="tab"&gt;Teams&lt;/a&gt;&lt;/li&gt;
      &lt;li class="navItem"&gt;&lt;a href="#scores" data-toggle="tab"&gt;League Schedule&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;ul class="nav pull-right"
      &lt;li class="navItem hide" id="navMyTeam"&gt;&lt;a href="#myTeam" data-toggle="tab"&gt;My Teams&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So I like the positioning of everything on the navbar; however, because these are two different unordered lists they don't cooperate with each other.  For example, if the Home tab is being displayed and the user clicks My Teams.  The Home tab will remain active and the My Teams page will also be active simultaneously and it causes a ton of problems.  Basically, I want this positioning and I want them to function as if they were all in the same unordered list.   </p>