title: Drop Down Navigation
body: <p>I'm trying to create a drop down menu, where only ONE drop down is separated into columns.  The reason is because this list is so long a user has to scroll, so I'm trying to avoid that.  When I attempt to change just the width of THAT group, it changes all of the widths.  I've tried classes and Id's and nothing is working.  Any suggestions?  Here is my code:</p>
  
  <pre><code>&lt;li&gt;&lt;a href="en.tests.html"&gt;Test Types&lt;/a&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href=""&gt;Analytical Lab&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=""&gt;Charpy Testing&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=""&gt;Chemical Testing&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=""&gt;Composite Testing&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=""&gt;Corrosion Testing&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="en.creep.html"&gt;Creep Testing&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=""&gt;CTOD Testing&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=""&gt;Fatigue Testing&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=""&gt;Fastener Testing&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=""&gt;Fracture Toughness&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=""&gt;Heat Treat&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#nav ul li ul {
      width: 170px;
      }
  </code></pre>
  
  <p>When I change this width it creates the menu I want, but changes all navigation.  How can I choose just the group?</p>