El problema de que la última pestaña se mueva a la linea de abajo me parece que es lo que dices, el width de la capa que hace de contenedor del menú es más pequeño que el width sumado de las pestañas, con lo que el último lo pone en la linea siguiente.
Prueba a darle un poco más de anchura si puedes a esa capa.
Yo tengo creado uno que tiene submenus, pero la parte inicial creo que te servirá:
Código:
#menu{
background: #999999;
position: relative;
top: 55px;
left: 285px;
#left: 125px; /*IE 7.0*/
_left: 125px; /*IE 6.0*/
width: 388px;
padding: 0px 0px 0px 0px;
float: none;
background-color: #ffffff;
z-index: 1;
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
li {
float: left;
position: relative;
width: 97px;
font: bold italic 1px arial;
}
ul li a{
display: block;
text-decoration: none;
color: #710000;
font-size: 11px;
background: #EBEBEB; /* IE6 Bug */
padding: 5px;
border: 1px solid #710000;
border-bottom: 1px solid #710000;
border-top: 1px solid #000;
cursor: default;
}
El HTML sería una lista sencilla de los elementos que tu quisieras dentro de un div:
Código:
<div id="menu">
<ul id="nav">
<li><a>Opcion 1</a></li>
<li><a>Opcion 2</a></li>
</ul>
</div>
Y las posiciones y anchos a gusto del consumidor. Como verás el IE te va a dar problemas (para no variar).
Saludos.