La creación de menús es probablemente uno de los puntos principales en el desarrollo de sitios y programas. Además, una buena elaboración y diseño lógico de dicho menú es la cara de un sitio o de cualquier programa. Por ejemplo, tomemos a Microsoft y el sistema operativo Windows 7. Después del lanzamiento de Windows 7, Microsoft escuchó muchas críticas que no fueron halagadoras. Ha habido muchas críticas, pero la mayoría de las veces elementos de menú colocados de manera inconveniente. Lee atentamente este tutorial sobre cómo crear un menú desplegable horizontal con CSS y Expression Web. Los estilos de etiqueta cambiarán para crear el menú.
Instrucciones
Paso 1
Vaya a Administrar estilos y luego haga clic en el botón Nuevo estilo. Asigne el nombre Selector ul li al nuevo estilo que acaba de crear. También recuerde asegurarse de que el nuevo estilo se debe definir en el archivo desplegable.css.
Paso 2
Para estirar un menú horizontal, debe indicar a los elementos del menú que será horizontal. A continuación, debe determinar el ancho de cada elemento del menú y eliminar todos los puntos innecesarios delante de todos los elementos de la lista.
Paso 3
Para la alineación horizontal, vaya a Diseño y establezca el atributo de visualización en línea. Establezca el atributo de flotación a la izquierda. Haga clic en el botón Aplicar. Todos los elementos de la lista deben establecerse en una línea. Para que no se superpongan entre sí, debe hacer lo siguiente: establecer el valor de Posición del atributo de ancho en 150px. Ahora compruébalo. Todos los elementos de la lista deben tener el mismo tamaño.
Paso 4
Ahora tenemos que intentar eliminar los puntos delante de los elementos de la lista. Para hacer esto, vaya a Lista y establezca el atributo de tipo de estilo de lista en ninguno.
Paso 5
Haga clic en Aceptar para aceptar todos los cambios.
Paso 6
Para ajustar el tamaño de fuente para el estilo ul li, debe hacer lo siguiente. En Administrar estilos, haga clic derecho en el estilo ul li que necesita para seleccionar Modificar estilo. Se abrirá el cuadro de diálogo familiar para agregar o cambiar atributos. Vaya a la categoría Fuente y establezca el atributo font-family en Arial, Helvetica, sans-serif. A continuación, vaya al atributo de tamaño de fuente y configúrelo en 0.9em. Después de eso, configure el atributo text-transform, establezca el valor en mayúsculas.
Paso 7
La altura de los elementos del menú creado se puede ajustar en la categoría Posición. Establezca el atributo de altura en 30px.
Paso 8
A continuación, debe guardar el archivo menu.html. Para hacer esto, Expression Web abrirá la ventana requerida Guardar archivos incrustados para guardar el archivo. Guárdelo en el archivo drop-down.css. Haga clic en Aceptar para guardar.
Paso 9
Ahora verifique su resultado. Para mayor confiabilidad, es mejor probarlo en diferentes navegadores. Para comprobar el resultado obtenido en el navegador predeterminado, debe presionar la tecla F12 en su teclado.
