title: I want my dropdown menu to have a max-width, but my CSS isn't working as expected
body: <p>I want my dropdown menus to be no more than 250px wide, and the text to wrap to the next line. I set a max-width but they are not expanding.</p>
  
  <p><a href="http://jsfiddle.net/wtpvejjh/1/" rel="nofollow">http://jsfiddle.net/wtpvejjh/1/</a></p>
  
  <pre><code>&lt;nav&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt;First
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;I want this to wrap to the next line at 250px&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Something&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Something&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt;Second
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Something&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Something&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Something&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt;Third
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Something&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Something&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Something&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>