Question

i have a problem with CSS white space between words of the menu bar. I tried numerous ways but still cant solve it. Can someone help me here?

The picture of the menu problem can be seen below:
http://imageshack.us/photo/my-images/201/44262065.jpg/

I want the outcome to be like this, lesser space between each menu:
http://i47.tinypic.com/2vvwcnn.jpg

Here is my css:

  #cssmenu{
     border:none;
     border:0px;
     margin:0px;
     padding:0px;
     font-family:verdana,geneva,arial,helvetica,sans-serif;
     font-size:14px;
     font-weight:bold;
     color:8e8e8e;
}
  #cssmenu ul{
     background:url(img/menu-bg.gif) top left repeat-x;

     height:43px;
     list-style:none;
     margin:0;
     padding:0;


}
#cssmenu li{
    float:left;
    padding:0px 0px 0px 132px;
    display: inline-block;
    }
#cssmenu li a{
    color:#666666;
    display:block;
    font-weight:bold;
    line-height:43px;
    padding:0px 0px;
    text-align:left;
    text-decoration:none;
    }
    #cssmenu li a:hover{
        color:#000000;
        text-decoration:none;
        }
#cssmenu li ul{
    background:#e0e0e0;
    border-left:2px solid #f68618;
    border-right:2px solid #f68618;
    border-bottom:2px solid #f68618;
    display:none;
    height:auto;
    filter:alpha(opacity=95);
    opacity:0.95;
    position:absolute;
    width:180px;
    z-index:200;
    /*top:1em;
    /*left:0;*/
    }
#cssmenu li:hover ul{
    display:block;
    }
#cssmenu li li {
    display:block;
    float:none;
    padding:0px;
    width:180px;
    }
#cssmenu li ul a{
    display:block;
    font-size:12px;
    font-style:normal;
    padding:0px 10px 0px 15px;
    text-align:left;
    }
    #cssmenu li ul a:hover{
        background:#949494;
        color:#000000;
        opacity:1.0;
        filter:alpha(opacity=100);
        }
#cssmenu p{
    clear:left;
    }   
#cssmenu .active > a:hover {
    color:#ffffff;
    }

Here is my html code:

<div id='cssmenu'>

<ul>
   <li><a href='index.php'><span>Home</span></a></li>
   <li><a href='promotions.php'><span>Promotions</span></a></li>
   <li><a href='outlets.php'><span>Outlets</span></a></li>
   <li><a href='feedback.php'><span>Feedback</span></a></li>
   <li class='has-sub '><a href='#'><span>Career</span></a>
      <ul>
         <li><a href='stall.php'><span>Stall Leasing</span></a></li>
         <li><a href='career.php'><span>Career Opportunity</span></a></li>
      </ul>
   </li>
   <li><a href='contactUs.php'><span>Contact Us</span></a></li>
</ul>

                </div>

Answer 1

use this decrease your padding of li and line-height also

#cssmenu li{
    float:left;
    padding:30px;
    display: inline-block;
    }