Adding inline text to jQuery Accordian Menu

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

Who is Participating?
jonath2002Connect With a Mentor Author Commented:
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

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

Open in new window

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.