css display block issue

I have a css script which i use to render a collapsible vertical menu.
When fully  expanded it looks like this
   menu iem
   menu item
         sub menu item
         sub menu item
   menu item

I would like to enhance this menu so it looks like this
   menu item (event)
   menu item (event)
         sub menu (event)

My problem relates to the use of display blocks
If I place the text "(event)" before or after the </li>, that text is dropped to a new line due to the "display: block" css command.

Can you help.

see code below
...................


#cellSubNavigation {
      width:250px;
      margin:60px 5px 0px 10px;
}      
#cellSubNavigation a {
      font:normal 13px 'MyriadProRegular', Arial, Tahoma, sans-serif;
      width:                        270px;
      display:                  block;
      cursor:                        pointer;
      margin:                        0px 0px 0px 0px;
      padding:                  2px 0px 2px 10px;
      color:                        #363729;      
      background-image:      url('../images/quick-bar.gif');
      background-repeat:      no-repeat;
      background-position:center left;      
}
#cellSubNavigation a.active,
#cellSubNavigation li li a.navSelected {
      font:normal 13px 'MyriadProRegular', Arial, Tahoma, sans-serif;
      text-decoration:      none;
      color:                        #BADD4F;
}
#cellSubNavigation a:hover{      text-decoration:underline;}      
#cellSubNavigation ul, #cellSubNavigation li {
      font:normal 13px 'MyriadProRegular', Arial, Tahoma, sans-serif;
      margin:                        0px 0px 0px 0px;
      padding:                  0px 0px 0px 0px;
      list-style:                  none;      
      display:                  inline;
}
#cellSubNavigation ul li ul {
      display:none;}
#cellSubNavigation li li a {
      font:normal 13px 'MyriadProRegular', Arial, Tahoma, sans-serif;
      width:                        240px;
      margin:                        0px 0px 0px 20px;
      padding:                  2px 0px 2px 10px;
      font-weight:            normal;
      background-image:      url('../images/bg_cellSubNavigation_li_li_a.gif');
      background-repeat:      no-repeat;
      background-position:center left;      
}
#cellSubNavigation li li li a {
      font:normal 13px 'MyriadProRegular', Arial, Tahoma, sans-serif;
      width:                        200px;
      margin:                        0px 0px 0px 40px;
      padding:                  2px 0px 2px 10px;
      background-image:      url('../images/bg_cellSubNavigation_li_li_li_a.gif');      
}
#sort a{
      text-decoration:none;
      display:block;
}