How can I keep my last horizontal nav item from wr

Question

http://www.ashlandmediagroup.com/menu-test/menu.html The hover state of the last menu item needs to extend to the end of the menu, but this causes the menu to break when zooming in and out.

I have had the same problem with other menu's and would like to know if there is a solution for this.

Here is my code:

/* main navbar */

ul#main-menu {
  float: left;
  font-size: 14px;
  font-family: "arial";
  text-transform: uppercase;
  margin: 0;
  width: 100%;
}

ul#main-menu {
  height: 33px;
  list-style: none outside;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  behavior: url(http://www.ashlandmediagroup.com/menu-test/border-radius.htc);
}

ul#main-menu {
  background: url(nav-back.jpg) repeat-x;
}

ul#main-menu li {
  float: left;
  height: 33px;
}

ul#main-menu li a {
  text-decoration: none;
  color: #fff;
  display: block;
  padding: 8px 20px 9px 20px;
  background: url('../images/nav-divider.jpg') no-repeat;
  height: 16px;
}

ul#main-menu li:first-child a {
  padding: 8px 10px 9px 26px;
  background: none;
}

ul#main-menu li:first-child.active {
  border-radius: 5px 0 0 5px;
}

li.wwd span,
li.wwd:hover span {
  display: block;
  background: url('../images/what-we-do-hover.png') no-repeat 135px 0;
  width: 165px;
}

ul#main-menu>li:hover,
ul#main-menu li.active {
  background: url(nav-hover.jpg) repeat-x;
}

ul#main-menu {}

li.wwd:hover {}

ul#main-menu li:last-child {
  /*
        border-radius : 0px 5px 5px 0px;
    	margin-right: 0px;
    */
}

ul#main-menu li:last-child a {}

ul#main-menu li:last-child a:hover {}

/* sub-menu: main categories */

#sub-menu {
  z-index: 100;
}

ul#main-menu ul {
  position: relative;
  left: -9999px;
  background: rgba(255, 255, 255, 0);
}

ul#main-menu ul li {
  /* Introducing a padding between the li and the a give the illusion spaced items */
  float: left;
}

ul#main-menu ul li a {
  height: auto;
}

ul#main-menu ul#sub-menu a {
  white-space: nowrap;
  /* Stop text wrapping and creating multi-line dropdown items */
}

ul#main-menu li:hover ul,
ul#main-menu li.active ul {
  /* Display the dropdown on hover */
  left: 0px;
  /* Bring back on-screen when needed */
}

ul#main-menu li:hover a {
  /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
  text-decoration: none;
}

ul#main-menu li:hover ul a {
  /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
  text-decoration: none;
}

ul#main-menu li:hover ul li a:hover {
  /* Here we define the most explicit hover states--what happens when you hover each individual link. */
}

ul#main-menu ul#sub-menu {
  height: 51px;
  background: #e7eff2;
  border-radius: 0 0 5px 5px;
  width: 700px;
}

ul#main-menu ul#sub-menu li {
  background: none;
  font-size: 12px;
  height: 51px;
  color
}

ul#main-menu ul#sub-menu li:hover {
  background-color: d8e0e8;
}

ul#main-menu ul#sub-menu li a {
  color: #3a6f8f;
  text-transform: none;
  padding: 0 30px 0 30px;
  font-size: 13px;
  line-height: 51px;
  font-weight: bold;
  border-right: 1px solid #d8e0e8;
}

ul#main-menu ul#sub-menu li:last-child a {
  border-right: none;
}

ul#main-menu ul#sub-menu li a.active,
nav#main-nav ul#main-menu ul#sub-menu li a:hover {
  color: #000033;
}

<div style="width: 940px;margin: 30px auto;">
  <nav class="sixteen columns" id="main-nav">
    <div class="" id="nav-container">
      <ul id="main-menu">
        <li class="wwd active"><span><a href="/what-we-do">What We Do</a>
    <ul id="sub-menu">
    <li><a href="/citizen_health_and_safety">Citizen Health &amp; Safety</a></li>
    <li><a href="/revenue_and_spending">Revenue &amp; Spending</a></li>
    <li><a href="/open_accountable_government">Open, Accountable Government</a></li>
    </ul>
    </span></li>
        <li><a href="/resources">Resources</a></li>
        <li><a href="/government_matters">Recent Analysis</a></li>
        <li><a href="/the_fine_print">Blog</a></li>
        <li><a href="/press_room">Press Room</a></li>
        <li><a href="/about-us">About Us</a></li>
        <li><a href="/get_involved">Take Action</a></li>
      </ul>
    </div>
  </nav>
</div>

Answer 1

It's not entirely clear your current layout goals, but here's one solution.

1. Change id="main-menu" width from 100%; to auto;

2. Change id="sub-menu" width from 700px; to 665px;

jsFiddle DEMO

---

EDIT: This alternate method preserves the current widths you have to illustrate that you can "extend" the last navigation button hover area to it's fullest width available.

Note in this jsFiddle, you'll see that adjustments are required to "fill in the gap" that the current live CSS is using when using 100%, but you can change that to the exact pixel value you need.

jsFiddle DEMO v2 100% width

jsFiddle DEMO v3 Pixel width

Reminder: The border used in v2 and v3 adds to the size of the breadcrumb.