title: Make li tag invisible via class
body: <p>I want to the class <code>dropdown</code> invisible.  <code>dropdown</code> will be used only for specific <code>li</code> tags.  I tried this, but it doesn't work: </p>
  
  <pre><code>.dropdown{
      display:none;
  }
  </code></pre>
  
  <p>Is there a way to make this work?  Am I doing something wrong in my CSS?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="MainNavigation" class="nContainer" name="MainNav" value="MainNavigation"&gt;
      &lt;ul class="nav navbar-nav"&gt;
          &lt;li class="dropdown"&gt;
              &lt;a href="/page.aspx" id="ctl00_top_nav_SOnav" class="dropdown-toggle"&gt;page&lt;/a&gt;
              &lt;ul class="dropdown-menu"&gt;
                  &lt;li&gt;&lt;a href="/page1.aspx"&gt;page1&lt;/a&gt; &lt;/li&gt;
                  &lt;li&gt;&lt;a href="/page2.aspx"&gt;page2&lt;/a&gt; &lt;/li&gt;
                  &lt;li&gt;&lt;a href="/page3.aspx"&gt;page3&lt;/a&gt; &lt;/li&gt;
                  &lt;li&gt;&lt;a href="/page4.aspx"&gt;page4&lt;/a&gt; &lt;/li&gt;
                  &lt;li&gt;&lt;a href="/page5.aspx"&gt;page5&lt;/a&gt; &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;a id="Homepage" class="navbar-brand" href="somepage.com"&gt;
              &lt;img src="/images/aGif.gif?v=24820" alt="someotherpage.com" border="0"&gt;
          &lt;/a&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>