title: how to move the the image to right side of the li manu?
body: <p>I have image (orange flower) , I want to move it to right side in the li.</p>
  
  <p>The image embedded in the <code>&lt;a&gt;</code> tag and I write <code>float:right;</code> but it is not working.</p>
  
  <p>I donwt know why, I need help, many thanks.</p>
  
  <p><a href="http://jsfiddle.net/centerwow/5gGum/22/" rel="nofollow">Demo jsFiddle</a></p>
  
  <pre><code>    &lt;ul id="menu"&gt;
                      &lt;li&gt;&lt;a href="index.html"&gt;home&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="learnmore.html"&gt;פרטים נוספים&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="services.html"&gt;learnmore&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="about_us.html"&gt;about_us&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="prices.html"&gt;prices&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="location.html"&gt;location&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;​
  * { 
      margin:0; padding:0;
      border:0; diraction:rtl;
  }
   body{
       text-align:right;
       font-family:Arial;
       font-size: 20px;
       border:1px solid red;
       font:13px Arial, Helvetica, sans-serif; color:#a7a7a7;
       line-height:20px
  }
  #menu { width:100%;
          border: 5px solid green;
          padding:18px 30px 0 0; border-bottom:1px solid #e2e2e2;}
  #menu li { 
      border: 5px solid brown;float:right;padding-right:30px;}
  #menu li a{ 
  
      right:0;
   text-transform:uppercase; text-decoration:none; 
   color:#2c2c25; font-size:18px; line-height:20px;
      float:right; right:0;
       background:url(http://t0.gstatic.com/images?q=tbn:ANd9GcRP4bAv-ruMbgWa8rTLZhWOITQk6aGOI8L_YMrmsRbacuIR502w) 
      7px 1px no-repeat;
  
  }​
  </code></pre>