css menu positioning

ul#menu {
  background-image:url(../images/menu.png);
  width:992px;
  height:62px;
  margin:0 auto;
  background-repeat: no-repeat;
  overflow:hidden;
  clear:both;
}

ul#menu li {
  background-image:url(../images/sep.png);
  background-position: top right;
  background-repeat: no-repeat;
  width:112px;
  height:52px;
  margin-right:20px;    
  display: block;
  float:left;   
}

ul#menu li a {
  width:109px;
  height:52px;
  padding:0;
  margin:0;
  padding-top:14px;
  font-size: 1.6em;
  text-decora开发者_高级运维tion: none;
  display: block;
  text-align: center;
  outline: 0;
  float:left;
  color: #272727;
}

and something like this <li><a href="#about" class="menuitem">Lorem Ispus Dolor</a></li> The problem is that the "Lorem Ispus Dolor" doesn't extend horizontally but vertically

---

ul#menu li a {
  width:109px;

That is too narrow for whole text with that font size, so text wraps to new line.

Here is example with width: 300px; http://jsfiddle.net/ncdkm/