Mantenga los elementos de la lista en la misma línea al cambiar el tamaño. Diseño líquido CSS

Tengo este menú que encontré cómo hacerlo en un tutorial pero solo tengo un problema. Cuando cambio el tamaño de la página, todo el diseño cambia para ajustarse al nuevo tamaño de la ventana, pero el menú parece crear nuevas líneas cuando el texto no cabe en la pantalla. Quiero que todo el menú permanezca en una sola línea, incluso si el tamaño de la ventana es demasiado pequeño para mostrarlo todo. He probado muchos trucos que he encontrado aquí, pero ninguno parece funcionar para mí. Este es el CSS que estoy usando.

#navcontainer {
margin: auto;
width: 95%;
}
#menu
{
width: 100%;
margin: 0;
padding: 0 0 0 0;
list-style: none;
background: #C2D1DA;
background: -moz-linear-gradient(#DDE7ED, #C2D1DA);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #C2D1DA),color-stop(1, #DDE7ED));
background: -webkit-linear-gradient(#DDE7ED, #C2D1DA);
background: -o-linear-gradient(#DDE7ED, #C2D1DA);
background: -ms-linear-gradient(#DDE7ED, #C2D1DA);
background: linear-gradient(#DDE7ED, #C2D1DA);
-moz-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: 0 2px 1px #9c9c9c;
-webkit-box-shadow: 0 2px 1px #9c9c9c;
box-shadow: 0 2px 1px #9c9c9c;
}
#menu li
{
float: left;
padding: 0 0 10px 0;
position: relative;
line-height: 0;
}
#menu a
{
float: left;
height: 13px;
padding: 0 25px;
color: #1A6B91;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 0px 1px #004063;
}
#menu li:hover > a
{
color: #333;
}
*html #menu li a:hover /* IE6 */
{
color: #333;
}
#menu li:hover > ul
{
display: block;
}
/*SUB MENU*/
#menu ul
{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 23px;
left: 0;
z-index: 99999;
background: #DDE7ED;
background: -moz-linear-gradient(#DDE7ED, #C2D1DA);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #C2D1DA),color-stop(1, #DDE7ED));
background: -webkit-linear-gradient(#DDE7ED, #C2D1DA);
background: -o-linear-gradient(#DDE7ED, #C2D1DA);
background: -ms-linear-gradient(#DDE7ED, #C2D1DA);
background: linear-gradient(#DDE7ED, #C2D1DA);
-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
box-shadow: 0 0 2px rgba(255,255,255,.5);
-moz-border-radius: 5px;
border-radius: 5px;
}
#menu ul ul
{
top: 0;
left: 190px;
}
#menu ul li
{
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #0A486C, 0 2px 0 #1A6891;
-webkit-box-shadow: 0 1px 0 #0A486C, 0 2px 0 #1A6891;
box-shadow: 0 1px 0 #0A486C, 0 2px 0 #1A6891;*/
}
#menu ul li:last-child
{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a
{
padding: 10px;
height: 10px;
width: 170px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
*html #menu ul a /* IE6 */
{
height: 10px;
width: 170px;
}
*:first-child+html #menu ul a /* IE7 */
{
height: 10px;
width: 170px;
}
#menu ul a:hover
{
background: #0186ba;
background: -moz-linear-gradient(#04acec,  #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec,  #0186ba);
background: -o-linear-gradient(#04acec,  #0186ba);
background: -ms-linear-gradient(#04acec,  #0186ba);
background: linear-gradient(#04acec,  #0186ba);
}
#menu ul li:first-child a
{
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
#menu ul li:first-child a:after
{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #DDE7ED;
}
#menu ul ul li:first-child a:after
{
left: -8px;
top: 12px;
width: 0;
height: 0;
border-left: 0; 
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-right: 8px solid #DDE7ED;/*cambiar por gradiente*/
}
#menu ul li:first-child a:hover:after
{
border-bottom-color: #04acec;
}
#menu ul ul li:first-child a:hover:after
{
border-right-color: #04acec; /*cambiar por gradiente*/
border-bottom-color: transparent;   
}
#menu ul li:last-child a
{
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
/* Clear floated elements */
#menu:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}

Y el código HTML para la estructura del menú está aquí.

<script type="text/javascript">
$(function() {
if ($.browser.msie && $.browser.version.substr(0,1)<7)
{
    $('li').has('ul').mouseover(function(){
        $(this).children('ul').show();
    }).mouseout(function(){
        $(this).children('ul').hide();
    })
}
});
</script>
<div id="navcontainer">
<ul id="menu">
<li><a href="#" onclick="inicio();">Inicio</a></li>
<li><a href="#">ISO 9001</a>
    <ul>
        <li><a href="#">Nueva A.C. o A.P.</a></li>
        <li><a href="#">Tabla A.C. y A.P.</a></li>
    </ul>
</li>
<li><a href="#" onclick="muestras();">Muestras</a>
    <ul>
        <li><a href="#" onclick="muestras();">Solicitud de Muestra</a></li>
        <li><a href="#" onclick="muestrasPendientes();">Muestras Pendientes</a></li>
        <li><a href="#">Muestras Terminadas</a></li>
        <li><a href="#">Garant&iacute;as</a></li>
        <li><a href="#">Cat&aacute;logo de Productos</a></li>
    </ul>
</li>
<li><a href="#" onclick="proyectos();">Proyectos</a>
    <ul>
        <li><a href="#" onclick="proyectos();">Nuevo Proyecto</a></li>
        <li><a href="#" onclick="proyectosVista();">Proyectos</a></li>
        <li><a href="#">Nueva Actividad</a></li>
        <li><a href="#">Actividades Proyectos</a></li>
    </ul>
</li>
<li><a href="#" onclick="tickets();">Tickets</a>
    <ul>
        <li><a href="#" onclick="tickets();">Nuevo Ticket</a></li>
        <li><a href="#" onclick="ticketsAbiertos();">Tickets Abiertos</a></li>
        <li><a href="#" onclick="ticketsTerminados();">Tickets Terminados</a></li>
        <li><a href="#" onclick="ticketsPorTerminar();">Tickets por Terminar</a></li>
    </ul>
</li>
<li><a href="#" onclick="iCalendar();">iCalendar</a></li>
<li><a href="#" onclick="mkt();">MKT</a>
    <ul>
        <li><a href="#" onclick="publicidad();">Enviar Boletin</a></li>
    </ul>
</li>
<li><a href="#">Juntas</a>
    <ul>
        <li><a href="#">Nuevo Compromiso</a></li>
        <li><a href="#">Compromisos Abiertos</a></li>
        <li><a href="#">Compromisos Terminados</a></li>
        <li><a href="#">Todos los Compromisos</a></li>
        <li><a href="#">Nueva Minuta</a></li>
        <li><a href="#">Minutas Anteriores</a></li>
        <li><a href="#">Calendario de Eventos</a></li>
        <li><a href="#">Recordar Compromisos</a></li>
    </ul>
</li>
<li><a href="https://www.estatec.com/webmail" target="_blank">Mail</a></li>
</ul>
</div>
* html #menu{
zoom: 1;
} /* IE6 */
*:first-child+html #menu{
zoom: 1;
} /* IE7 */

Este es el menú como lo necesito. http://i.stack.imgur.com/wXLSw.png

este es el problema que tengo http://i.stack.imgur.com/B01H9.png

No me importa si el menú se muestra completo o no, pero lo necesito en la misma línea. Espero que puedas ayudarme

preguntado el 03 de mayo de 12 a las 19:05

¿Necesitas el menú para estirar? -

sí, el menú tiene que cambiar solo su ancho y si algunos elementos no encajan, entonces ocúltelos. La solución óptima para mí es que cuando el mouse está sobre la esquina derecha, el contenido comienza a desplazarse hacia la izquierda para mostrarse, pero creo que es demasiado difícil de lograr. Por ahora solo quiero ocultar los objetos que no encajan. No sé si estoy siendo lo suficientemente específico. -

intente "desbordamiento-x: oculto;" en #menú. -

3 Respuestas

http://jsfiddle.net/3aSTE/

Establezca una altura dura para el #menu y overflow-y:hidden

contestado el 03 de mayo de 12 a las 19:05

¡Vaya, eso elimina los estados flotantes! - cristobal marshall

También aquí hay un buen ejemplo de un menú desplegable receptivo csscience.com/dropdown-accordion - cristobal marshall

jajaja, acabo de darme cuenta de las cosas flotantes, tienes razón, se ha ido, alguna idea): - Antorni

¡Esta es la respuesta más simple posible!

Simplemente agregue debajo de dos propiedades a su archivo #menu css,

 text-align: left;
    width: 1010px;

¡Espero que funcione!

Respondido 01 Feb 13, 05:02

#menu {
    width: 100%;
    margin: 0;
    padding: 0 0 0 0;
    list-style: none;
    background: #C2D1DA;
    background: -moz-linear-gradient(#DDE7ED, #C2D1DA);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #C2D1DA),color-stop(1, #DDE7ED));
    background: -webkit-linear-gradient(#DDE7ED, #C2D1DA);
    background: -o-linear-gradient(#DDE7ED, #C2D1DA);
    background: -ms-linear-gradient(#DDE7ED, #C2D1DA);
    background: linear-gradient(#DDE7ED, #C2D1DA);
    -moz-border-radius: 50px;
    border-radius: 50px;
    -moz-box-shadow: 0 2px 1px #9c9c9c;
    -webkit-box-shadow: 0 2px 1px #9c9c9c;
    box-shadow: 0 2px 1px #9c9c9c;
    min-width: 952px;
}

Utilice el min-width atributo en el CSS.

respondido 11 mar '14, 12:03

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.