Entrar

como Agregar un menu desplegable.

juanjo679 · · Solicitar retirada
Buenas, tengo un pequeño problema, es la primera web que construyo, y la mayoria del diseño lo realizé en corel como para tener un bosquejo de como quería que quede la web y luego fui armando en html kit, adaptando los fondos etc. hice un menu lateral, vertical. El tema es que de uno de los items (dolce Ricompensa) del menu se divide en dos, entonces la idea es hacer solo de ese items un submenu que solo aparezca cuando uno posiciona el cursor sobre el mismo. Intente hacerlo de varias formas pero no lo he podido lograr y no quiero seguir perdiendo más tiempo. Necesito ayuda!!!

Aqui les envio el codigo html para que lo vean:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Dolce Básico</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>
<div id="fondo">
<div id="global">

<div id="curva-superior"></div>
<div id="cabecera">
<!--div id="logotipo">
<a href="index.htlm">
[contenido no disponible]
</a>
</div-->
<div id="publicidad">Bienvenidos a mi web</div>
</div>
<div id="navegacion">
<font face="adobe caslon pro">
<ul>
  • Quienes Somos
  • Un Mundo de Sabores
  • Contacto
    </font>
    </div>

    <div id="contenido">

    <div id="menu">

    <font face="monotype corsiva">
    <ul>
  • Dolce Básico
  • Dolce Tentación
  • Dolce Ricompensa
  • Dolce Esecutiva
  • Dolce I Bambini
  • Dolce Amore
  • Dolce Natura
  • Dolce Il Ricordo
    </font>
    </div>

    <div id="imagen">
    [contenido no disponible]
    </div>
    <div id="contenido2">
    <font face="arial">


    -Bandeja de mimbre.

    -Mantel y servilletas de tela.

    -Taza de Ceramica.

    -Untador, cucharas de metal.

    -Cafe, capuchino, te,
    te saborizados, mate cocido.

    -Leche.

    -Leche chocolotada

    -Jugo de naranja.

    -Alfajor.

    -Galletitas Saladas.

    -Galletitas Dulces.

    -Dos medialunas de grasa y
    dos de manteca.

    -Tostadas

    -Manteca o queso de untar.

    -Dulce de leche, mermelada

    -Azucar y edulcorante.</p>
    </font>
    </div>

    <div id="pie">
    <ul>
  • Quienes somos
  • Un Mundo de Sabores
  • Contacto

    </div>

    <div id="curva-inferior"></div>
    </div>


    </body>
    </html>


    CSS:
    * {text-indent: 0px; margin: Opx; padding: Opx; border: Opx}
    p {text-align: left}
    h1 {font-size: 1.2em; color: blue; font-weight: bold; text-decoration: underline; text-align: center}
    h2 {font-size: 1.1em; color: blue; font-weight: bold; text-decoration: none; text-align: center}
    body {text-align: center}
    #fondo {background-image: url(objetos/fondo-verde.png); width: 1024px; height: 768px}
    #global {width:800px; height: 604px; margin: 82px auto; background-image: url(objetos/fono-global-dasayunos.png)}
    #cabecera {background-color: none; height: 169px}
    #logotipo {width: 280px; float: left}
    #publicidad {width: 420px; height: 169px; float: left; margin-top: 0px; background-color: none}
    #navegacion {background-color: none; height: 31px; overflow: hidden}
    #navegacion li {float: left; list-style: none; margin: 4px 20px 0px 20px; font-size: 18px}
    #navegacion ul {margin-left: 60px}
    #contenido {background-color: none; float: left}
    #imagen {float: left; margin-top: 45px; margin-left: 10px}
    #contenido2{background-color: none; float: right; width: 265px; height: 100px}
    #contenido p{padding: 15px 10px 5px 5px; text-indent: 0px; color: white; font-size: 13px}
    #menu {width: 150px; height: 0px; float:left; text-align: left; margin: 15px 10px 0px 10px; background-position: bottom; padding-bottom: 5px}
    #menu li {width: 151px; weight: 38px; text-decoration: none; list-style: none; margin: 7.5px 8px 3px 0px; font-size: 22px}
    #menu h1 {text-decoration: none; font-size: 12px; padding-top: 12px}
    #pie {background-color: none; height: 50px; overflow: hidden; margin-top: 47px}
    #pie li {Float: left; list-style: none; margin: 30 20 0 30px ; font-size: 12px}
    #pie ul {margin-left: 200px}
    a {color: white; text-decoration: none; display: block}
    a:link {}
    a:visited {}
    a:hover {color: silver; text-decoration: none}
    a:active {}
    #pie a {color: silver; text-decoration: none; display: block}
    #pie a:link{}
    #pie a:visited{}
    #pie a:hover {color: gray; text-decoration: underline; background-color: white}
    #pie a:active {color: black}
    #logotipo a {}
    #logotipo a:link {}
    #logotipo a:visited {}
    #logotipo a:hover {baground-color: white}
    #logotipo a:active {}

    Si hay algo que mejorar, agradeceria me lo hagan saber.
    Muchas gracias.
    Juanjo
    • Foley · · Solicitar retirada
    Hola

    No tengo mucho tiempo para ver el código a fondo pero por lo que veo tienes dos menús, es así? Uno horizontal en css y otro vertical sin usar css verdad?

    Pues bien, primero tienes que hacer el vertical también en css y luego hacerlo desplegable. Te dejo un tutorial:

    http://www.chuidiang.com/css/ejemplos/menu_desplegable_css.php

    El menú que conseguirás es un desplegable vertical muy básico, luego lo puedes modificar a tu gusto ;)
    dome · · Solicitar retirada
    Buenas jorgens!

    Primero de todo darte las gracias por esta currada. Ya había tocado html y algo d css pero tu curso paso a paso (he intentado no hacerlo taaaan paso a paso xD) me ha venido perfecto para repasar y aprender cosas nuevas.
    Bueno vamos al lío. Creo, y digo creo porqué es probable que me haya equivocado yo en algo, que el código que das en Mejora Tu Web -> Menú Desplegable -> Dynamicdrive está mal. Lo he probado y no me funcionaba. Creo que es la parte que va entre los <head></head>. Lo que he hecho ha sido coger el código del ejemplo que pones en esa misma página y ese si que funciona. Igual he copiado mal el código o yo que sé, pero bueno te lo comento por si quieres revisártelo.

    Ale un saludo!