troubleshooting Question

css display block issue

Avatar of joomla
joomlaFlag for Australia asked on
CSS
12 Comments1 Solution338 ViewsLast Modified:
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;
}
ASKER CERTIFIED SOLUTION
Kim Walker
Senior Developer

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 12 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 12 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros