title: Dropdown navigation bar
body: <p>I've made a dropdown navigation bar with css.
  But a want the font size on the menu items to be different then the submenues items.. It would also be nice if i could change the submenues apperances, change the box size etc.
  I'm really lost, all I can do i change both things at the same time.</p>
  
  <p>Any idea what I can do to the css? :)</p>
  
  <pre><code> &lt;div class="grid_7"id="navigation"&gt;
        &lt;ul&gt;
          &lt;li&gt;
          &lt;a href=""class="parent"&gt;Menu Item 1&lt;/a&gt;
              &lt;ul&gt; 
              &lt;li&gt;&lt;a href="#"&gt;sub menu item 1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;sub menu item 2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;sub menu item 3&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;sub menu item 4&lt;/a&gt;&lt;/li&gt; 
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  
                &lt;ul&gt;
                  &lt;li&gt;&lt;a href=""&gt;Menu Item 1&lt;/a&gt;
            &lt;ul&gt; 
              &lt;li&gt;&lt;a href="#"&gt;sub menu item 1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;sub menu item 2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;sub menu item 3&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;sub menu item 4&lt;/a&gt;&lt;/li&gt; 
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  
                &lt;ul&gt;
          &lt;li&gt;&lt;a href=""&gt;Menu Item 1&lt;/a&gt;
              &lt;ul&gt; 
              &lt;li&gt;&lt;a href="#"&gt;sub menu item 1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;sub menu item 2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;sub menu item 3&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;sub menu item 4&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p></p>
  
  <p>css:</p>
  
  <pre><code>   #navigation
     {
     height:75px;
     }
  
     #utility
     {
     height:75px;
     }
  
     ul 
     {
     font-family: Arial, Verdana;
     margin: 0;
     padding: 0;
     }
     ul li 
     {
     display: block;
     position: relative;
     float: left;
     font-size:16px;
     }
  
     li ul { display: none; }
  
     #navigation ul
     {margin:0px; padding:0px;}
  
  
     ul li a 
     {
     display:block;
     text-decoration: none;
     color: white;
     padding: 20px 30px 20px 15px;
     position:relative;
     margin: 0;
  
     }
  
     ul li a:hover 
     { 
     background: #355F9E;
     }
  
     li:hover ul 
     {
     display: block;
     position: absolute;
     }
  
     li:hover a 
     { 
     background: #355F9E; 
     }
  
     li:hover li a:hover 
     { 
     background: #BCCDD8;
     }
  </code></pre>