css rollover menu

hi all,

if someone could please help....i am creating a menu with headings in CSS. the headings (h4) are fine and have no extra space around them. the links all have a large space inbetween them. ...equivalent to one line. i have tried setting every padding and margin to zero...still has this space.

help...?

<div id="sb">
<h4>Browse</h4>
<h4>Sports</h4>
<a href="http://"..>Cricket</a><br>
<a href="http://"..>Promise</a><br>
<a href="http://"..>Festival</a><br>
<h4>Music</h4>
<a href="http://">Music</a><br>
<</div>

#sb {
font-family: "Californian FB", "Calisto MT", Chiller, "Engravers MT";
font-size: 12px;
color: CC6600;
background-color: FEE96D;
width: 175px;
padding: 0;
border: none;
margin: 0px 0px 1em;

}

#sb a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFCC66;
background-color: #CC6600;
display: block;
padding: 0;
border: none;
text-decoration: none;
width: 100%;
margin: 0px;
border-top-style: none;

}
#sb a:active {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #0000AE;
margin: 0px;

}
#sb a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFCC66;
margin: 0px;

}
#sb a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: xx-small;
color: #0000CC;
margin: 0px;

h4 {
font-family: "Californian FB", "Calisto MT", Chiller, "Engravers MT";
font-size: 12px;
text-align: center;
color: CC6600;
background-color: #FFDB6C;
border-top: thin none;
border-right: thin none;
border-bottom: thin none;
border-left: thin none;
margin: 0px;