div width 100% +10px: relative to parent?

Question

I have a ul/li menu with display:table/table-cell:auto layout, stretched to fill the container and distribute horizontal space between menu items. I have to align an additional UI element to the last menu item. I can achieve this by adding that element as a child of the last li element and making it 100% wide.

However, I need to position this UI element (language selector) partially outside of the main content, so I position this by a relative right:-10px. But the side effect is that the left edge of the selector moves to the right, compared to the menu element. Normally I'd increase the selector div's width by 10px, but since it's 100%, I can't do that. And the parent li's width is determined by its text content.

Is there a way to get this right using pure css? I can't add padding on the selector, because I need its child content to fill the whole div.

<div class="menu">
    <ul>
        <li><a href="#">first</a>
        </li>
        <li><a href="#">second</a>
            <div id="selector">
                <a href="#">EN</a>
                <a href="#">FR</a>
            </div>
        </li>
    </ul>
</div>

Here's a working example: http://jsfiddle.net/hJXng/13/

Answer 1

Depending on what browsers you want to support, a simple option is to use calc:

width: calc(100% + 10px);

See also: Can I use calc()
Example: http://jsfiddle.net/hJXng/19/