Height of Div is too much, not getting reduced?

[Andrew666]

I am trying to create a menubar with a few links in it. Here is my relevant code:CSS:\[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\]HTML\[code\]<div id="menuBar"><div id="menuItem"> <ul><li> <a href="http://stackoverflow.com/questions/12752907/index.php"> HOME</a> </li><li> <a href="http://stackoverflow.com/questions/12752907/index.php"> ABOUT</a> </li></ul></div> <!-- Menuitem closes --></div>\[/code\]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.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.