title: navigation bar list width
body: <p>I am creating a navigation bar right now and I want the width of the main elements on the navigation to be auto, but sub elements to all be a fixed width. The way the list is made is as such:</p>
  
  <pre><code>    &lt;li&gt;Main Element
          &lt;ul&gt;
          &lt;li&gt; Sub Element &lt;/li&gt;
          &lt;li&gt; Sub Element &lt;/li&gt;
          &lt;li&gt; Sub Element &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  </code></pre>
  
  <p>This is repeated for each main menu item and its submenu items.</p>
  
  <p>The issue I am having is I want to css for the sub elements to be 100px in width, but the main elements to be equal to the text size plus 10px of padding on both the left and right. It appears I can not change one without changing both, even after attempting to make classes to separate them. I have also tried editting <code>ul li</code> and <code>li ul</code> styles in my external style sheet. Thank you in advance for all help.</p>