¿Cómo puedo evitar que mi último elemento de navegación horizontal se envuelva en la siguiente línea?

http://www.ashlandmediagroup.com/menu-test/menu.html El estado de desplazamiento del último elemento del menú debe extenderse hasta el final del menú, pero esto hace que el menú se rompa al acercar y alejar. He tenido el mismo problema con otros menús y me gustaría saber si hay una solución para esto. Aquí está mi HTML:

 

Y mi CSS

  /* 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('../imageshttps://stackoverflow.com/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;} 

No está del todo claro tus objectives de diseño actuales, pero aquí hay una solución.

  1. Cambiar id="main-menu" width desde 100% ; a auto;

  2. Cambiar id="sub-menu" width id="sub-menu" desde 700px; a 665px;

jsFiddle DEMO


EDITAR: Este método alternativo conserva los anchos actuales que tiene que ilustrar para poder “extender” el último área de desplazamiento del botón de navegación a su ancho máximo disponible.

Tenga en cuenta que en este jsFiddle, verá que se requieren ajustes para “rellenar el espacio” que el CSS actual en vivo está utilizando al usar el 100% , pero puede cambiarlo al valor de píxel exacto que necesita.

jsFiddle DEMO v2 100% de ancho

jsFiddle DEMO v3 Ancho de píxel

Recordatorio: el borde utilizado en v2 y v3 se sum al tamaño de la ruta de exploración.