Print menu item in two lines.... CSS

I built a db driven menu..... However, Since there are several items, the menu appears in two lines. So, I was thinking of breaking the menuitem i开发者_运维百科nto two lines.. can u let me know how i can do this?

this is my css file

    .menu
   {
width: 900px;
    }
    .menu ul
   {
list-style: none;
max-width: 900px;

   }
  .menu li
 {
list-style: none;
display:inline;
float: left;
height: 53px;
line-height: 53px;
  }

.menu li a
 {
display: inline;
float: left;
color: #852917;
font-size: 11px;
font-weight: bold;
line-height: 53px;
max-width:120px; 
text-decoration: none;

background: #ebdbca url(menu_037_bg.jpg) no-repeat left;
border-bottom: 2px solid #d7a278;
}
 .menu li a:hover
 {
width: 120px;
white-space: pre-wrap;
color: #fff;
background: #a73e29 url(menu_037_h.jpg) no-repeat left;
border-bottom: 2px solid #b75542;
   }
  .menu li ul{

    border-left:2px solid #a80329;
    border-right:2px solid #a80329;
    border-bottom:2px solid #a80329;
    display:none;
    height:auto;
    width:120px;
    filter:alpha(opacity=95);
    opacity:0.95;
    position:absolute;

    z-index:200;
    /*top:1em;
    /*left:0;*/
    }
.menu li:hover ul{
    display:block;
    } 

Some best practices for styling list-based menus:

1) Don't style the LI (other than resetting margins, padding and using float:left if needed).

2) Use display:block and put all styling on the A tag. You don't need display: inline; float: left; or any other positioning code. Just set your width, padding margin, fonts and colours and you're all set. Long text will automatically wrap to two lines.

Here is the menu finally... two line dropdown....

http://jsfiddle.net/tJGx5/34/

Take it as an example, two line dropdowns don't work well :p

Update: fixed z-index bug in IE