title: Height of Div is too much, not getting reduced?
body: <p>I am trying to create a menubar with a few links in it. Here is my relevant code:</p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#menuBar {
      overflow: auto;
      padding: 0px 0px;
      margin: 15px 0px;
  }
  div#menuItem ul li {
      padding: 0px 20px 0px 20px;
      list-style-type: none;
      display: inline;
  }
  div#menuItem ul a {
      font-size:14px;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="menuBar"&gt;
  &lt;div id="menuItem"&gt; 
  &lt;ul&gt;
  &lt;li&gt; &lt;a href="index.php"&gt; HOME&lt;/a&gt; &lt;/li&gt;
  &lt;li&gt; &lt;a href="index.php"&gt; ABOUT&lt;/a&gt; &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt; &lt;!-- Menuitem closes --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So, the Problem here is that the minimum height of the menuBar remains fixed. I want it to show up a little smaller. I try setting the padding of <code>#menuBar {padding -5px 0px }</code>. But, nothing happens.</p>
  
  <p>How do I do that. And if I completly removing the code for padding. The height of the div becomes so small that it is just enough to accomodate the text.</p>