How to automatically insert the last menu item in the right corner?

Question

I am trying to create a menu in which the last menu item (with a different class) will be automatically inserted into the right corner of the menu. I am attaching a screenshot to this. There are several menu items on the left, and the last element must somehow calculate the rest of the available space on the right in the div menu, add this space as an addition to the right and display the background in the entire ON HOVER area (see the screen to understand this, please)

Is this possible?

Thank you so much

Answer 1

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

, , , , .

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

, IE6, .

- IE6 , .

Answer 2

, html :

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

#menu: relative;, div #menu.

Answer 3

, , , ul . , , , , .

, , ?

Answer 4

:

http://jsfiddle.net/ExLdQ/

, - . li background-color:transparent li.last.

Answer 5

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