How to stick the last menu item automatically to the right corner?

Question

Hi guys, I'm trying to create a menu, in which the last menu item (with different class) will stick automatically to the right corner of the menu. I'm attaching a screenshot for this. There are a few menu items on the left and the last item should somehow count the rest of the available space on the right in the menu div, add this space as padding to the right and display a background in whole area ON HOVER (see the screen to understand this please)

Is something like this possible?

Thanks a lot

Answer 1

assuming your html looks like this:

<div id="menu">
 <div class="entry">Services</div>
 ...
 <div class="entry last">Support Staff</div>
</div>

I would make the #menu position: relative;, so that you can position the last menu entry absolute inside the #menu div.

Answer 2

Not necessarily putting the menu item last, but if you always wanted that rounded corner at the end then you could apply a background image to the ul itself and position that right top with the curve. The only issue you'd run into with this method is, if you hover over the last menu it will not put a hover right to the right-hand edge.

If you knew how many menu items there were you could achieve this by setting the correct widths for all your menu items?

Answer 3

Have a look at this:

http://jsfiddle.net/ExLdQ/

The trick is to use your lighter green as the background or background-image for the whole list. You can than use the darker green on all li's and add a background-color:transparent to li.last.

Answer 4

Just add float: right; to your css for the last menu item, and use light background for both the list itself and the last menu item.

Answer 5

See if this will work for you: http://jsfiddle.net/neSxe/2

It relies on the fact that non-floated elements get pushed out of the way of floated elements, so by simply not floating it the last element fill up the rest of the space.

HTML

<ul id="menu">
    <li><a href="#">Services</a></li>
    <li><a href="#">Doctors</a></li>
    <li><a href="#">Hospitals</a></li>
    <li><a href="#">Roasted Chicken</a></li>
    <li class="last"><a href="#">Customer Service</a></li>
</ul>

CSS

#menu {
    width: 600px;
}
#menu li {
    float: left;
}
#menu li a {
    display: block;
    padding: 6px 14px 7px;
    color: #fefefe;
    background-color: #333;
    float: left;
}
#menu li a:hover {
    background-color: #666;
}
#menu li.last {
    float: none;
}
#menu li.last a {
    text-align: center;
    float: none;
}

Edit

I've made some changes to make it work smoother on IE6, by floating the anchors too.

If anybody else needs this and do not need to support IE6 and below, you can get rid of those two properties.