Adding inline text to jQuery Accordian Menu

Posted on 2009-02-19
Last Modified: 2012-05-06
I'm building a menu using the "Simple JQuery Accordion Menu" here"

I want to add an (left aligned) inline <div> or <span> for each <li>.  

I've attached an image of the desired output.

I've tried adding the following css: span {

	text-decoration: none;

	font-size: 10px;

	outline: none;	

	color: #fff;

	margin-top: 5px;


	float: right;


Then added this html before each <li>


This works in Firefox but does not display properly in IE6 which unfortunately is the target browser

Open in new window

Question by:jonath2002
    LVL 9

    Expert Comment

    What about doing it without SPAN, and using li instead, in your class name: li{

    Open in new window


    Accepted Solution

    I tried to do it like that but couldn't get it to work.  I started over and below is my updated CSS  and HTML.   It works better in IE but it's still not inline.   Thanks

    <html xmlns="" dir="ltr" lang="en-EN">
    	<link rel="stylesheet" type="text/css" href="style.css" />
    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    	<title>Simple JQuery Accordion menu - Redux</title>
    	<!--[if lt IE 8]>
       <style type="text/css">
       li a {display:inline-block;}
       li a {display:block;}
    	<ul id="menu1" class="menu">
    			<a href="#">Weblog Tools <span>Example</span></a>
    				<li><a href="">PivotX<span>Example</span></a></li>
    				<li><a href="">WordPress<span>Example</span></a></li>
    				<li><a href="">Textpattern<span>Example</span></a></li>
    				<li><a href="">Typo<span>Example</span></a></li>
    			<a href="#">Programming Languages</a>
    				<li><a href="">PHP</a></li>
    				<li><a href="">Ruby</a></li>
    				<li><a href="">Python</a></li>
    				<li><a href="">PERL</a></li>
    				<li><a href="">Java</a></li>
    				<li><a href="">C#</a></li>
    body {
      font-family: Helvetica, Arial, sans-serif;
      font-size: 0.9em;
    p {
      line-height: 1.5em;
     , ul {
      margin: 0;
      padding: 0;
      width: 15em;
      a {
      display: block;
      text-decoration: none;	
    /* added to try and float span to the right */  span{
    float: right;
      li {
      margin-top: 1px;
      li a {
      background: #333;
      color: #fff;	
      padding: 0.5em;
      li a:hover {
      background: #000;
      li ul li a {
      background: #ccc;
      color: #000;
      padding-left: 20px;
      li ul li a:hover {
      background: #aaa;
      border-left: 5px #000 solid;
      padding-left: 15px;
    .code { border: 1px solid #ccc; list-style-type: decimal-leading-zero; padding: 5px; margin: 0; }
    .code code { display: block; padding: 3px; margin-bottom: 0; }
    .code li { background: #ddd; border: 1px solid #ccc; margin: 0 0 2px 2.2em; }
    .indent1 { padding-left: 1em; }
    .indent2 { padding-left: 2em; }
    .indent3 { padding-left: 3em; }
    .indent4 { padding-left: 4em; }
    .indent5 { padding-left: 5em; }

    Open in new window


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How your wiki can always stay up-to-date

    Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
    - Increase transparency
    - Onboard new hires faster
    - Access from mobile/offline

    When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
    This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
    In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
    The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

    737 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    20 Experts available now in Live!

    Get 1:1 Help Now