Size background list item dependent of item size

Question

I have a unordered list as a menu. All items have a background-color. What I want is that the width of the item does not fill the width of the list, and that the item (including the background-color) is aligned to the right in the list. I hope you understand and might have an answer.

HTML:

<ul class="menu">
<li><a class="menuitem">First</a></li>
<li><a class="menuitem">Secondwithlongertext</a></li>
<li><a class="menuitem">Thirdbitshorter</a></li>
</ul>

And CSS:

ul li a.menuitem{ 
background-color:#000;
color:#fff;
}

Answer 1

As per you requirement you have to wrap the text inside the <span>. Here is a working Demo.

Here is the HTML code.

<ul class="menu">
  <li><a class="menuitem"><span>First</span></a></li>
<li><a class="menuitem"><span>Second Item with long  text can come here</span></a></li>
<li><a class="menuitem"><span>Thirdbitshorter</span></a></li>
</ul>

ul { 
    background-color:gold;
    color:#fff;
}
ul li{
    background: #990000;
}
ul li a {
    text-align: right;
}
ul li span{ background:black;}

Answer 2

ul { 
    background-color:#000;
    color:#fff;
    width: 100%;
}
ul li{
    background: #990000;
    width: 50%;
}
ul li a {
    text-align: right;
}

This should work for you if I understand what you're asking. Sometimes I make the backgrounds different colors just to clearly be able to see what is going on.