title: How to select only top-level li in recursive menu?
body: <p>How do I select only first-level li's? If I do 'ul li', it also selects the children. Is there a way to select only the top level and not the children using CSS? If not, I am ok with using jQuery, but how would I select it in that case too?</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li class="administration first"&gt;
          &lt;a href="/administration.aspx"&gt;&lt;span&gt;Administration&lt;/span&gt;&lt;/a&gt;
          &lt;ul&gt;
              &lt;li class="users first selected"&gt;&lt;a href="/administration/users.aspx"&gt;&lt;span&gt;Users&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li class="forms last"&gt;&lt;a href="/administration/forms.aspx"&gt;&lt;span&gt;Forms&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;div style="clear: both;"&gt;&lt;/div&gt;
      &lt;/li&gt;
      &lt;li class="analytics"&gt;&lt;a href="/analytics.aspx"&gt;&lt;span&gt;Analytics&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li class="options"&gt;&lt;a href="/options.aspx"&gt;&lt;span&gt;Options&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li class="system last"&gt;&lt;a href="/system.aspx"&gt;&lt;span&gt;System&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>