title: How do I customize dropdown menu in CSS?
body: <p><a href="http://jsfiddle.net/zcfqu/" rel="nofollow">http://jsfiddle.net/zcfqu/</a></p>
  
  <p>Been playing around with this piece of code for a while and am confused a bit.</p>
  
  <p>How do I:</p>
  
  <ol>
  <li>Change the color of the each submenu?</li>
  <li>Make the submenu the same width as the main button?</li>
  </ol>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;ul id="menu"&gt;
      &lt;li&gt;&lt;a href="#"&gt;This is the button&lt;/a&gt;
  
          &lt;ul class="submenu"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Button one&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Button two&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Button three&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>