0

Buenas tardes, estoy comenzando a aprender HTML, en este caso estoy experimentando con los menu, y quisiera que se abra el submenu al pasar el mouse sobre el link de los menu.

Este es el menu desplegable que tengo ahora.

introducir la descripción de la imagen aquí

Las opciones "Lozas, Lapidas, Promociones, Fotos 20x30" se despliegan cuando paso el mouse sobre la lista(opción "Productos") mas no en el link que está dentro esa lista.

Entonces mi duda es como hacer para que se abra el submenu cuando pase el mouse sobre el link(<a>)

Este es mi html:

<nav>
      <ul class="menu">
          <li><a href="" class="inicio">Inicio</a></li>
          <li class="prod"><a href="#" class="linkprod">Productos</a>
              <ul class="submenu">
                  <li><a href="#">Lozas</a></li>
                  <li><a href="#">Lápidas</a></li>
                  <li><a href="#">Promociones</a></li>
                  <li><a href="#">Fotos 20x30</a></li>
              </ul>
           </li>
            <li><a href="quienessomos.html">Quiénes Somos</a></li>
            <li><a href="#">Cómo se hace</a></li>
            <li><a href="contacto.html">Contacto</a></li>
        </ul>
  </nav>

Y este es el css:

  nav .menu {

   text-align: center;

   }

  nav .menu li{

   display: inline-block;
   padding: 15px 29px;
   list-style: none;

    }

  nav .menu li a{

    text-decoration: none;
    color: #000;
    text-transform: uppercase;
    font-family: 'Signika Negative', sans-serif;
    font-size: 0.9em;

    }


   nav .menu li a:hover{

      border-bottom: 2px solid #F13006;
      border-radius: 4px;

    }

   /*ACÁ COMIENZA CSS PARA SUBMENU*/

   .submenu{

    display: none;

    }


    .prod .linkprod:hover > ul{

    position: absolute;
    display: block;

   }

Entonces, para ser más especifico mi consulta seria; cómo hago para que el submenu se despliegue solamente cuando pase el mouse sobre el link, y también mi otro problema es que las listas de los submenus se están poniendo uno a lado de otro pero no debajo.

2 respuestas 2

0

lo puedes hacer con la siguiente propiedad de css puedes omitir hacer referencia al id de tu submenu ya que con el codigo le estas indicando cuales elementos son los que va a desplegar al pasar el mouse.

.menu li:hover > ul {
display:block;
}

.menu hace referencia al el nombre de tu clase que encierra tus li con que formas tu menu.

1
  • Claro, al poner eso se abre el submenu correctamente, pero se abre cuando me acerco a la opción, lo que deseo hacer es que se abra recién cuando estoy con el mouse encima del link, encima de la palabra mejor dicho, el 3 abr. 2017 a las 21:05
-1

Tienes que usar el selector de hermanos '~' para que el hover en link de productos afecte al submenu

nav .menu {

   text-align: center;

   }

  nav .menu li{

   display: inline-block;
   padding: 15px 29px;
   list-style: none;

    }

  nav .menu li a{

    text-decoration: none;
    color: #000;
    text-transform: uppercase;
    font-family: 'Signika Negative', sans-serif;
    font-size: 0.9em;

    }


   nav .menu li a:hover{

      border-bottom: 2px solid #F13006;
      border-radius: 4px;

    }

   /*ACÁ COMIENZA CSS PARA SUBMENU*/

   .submenu{
      display: none;
      position: absolute;
    }
    
    .linkprod:hover ~ .submenu {
      display: block;
    }
<nav>
      <ul class="menu">
          <li><a href="" class="inicio">Inicio</a></li>
          <li class="prod"><a href="#" class="linkprod">Productos</a>
              <ul class="submenu">
                  <li><a href="#">Lozas</a></li>
                  <li><a href="#">Lápidas</a></li>
                  <li><a href="#">Promociones</a></li>
                  <li><a href="#">Fotos 20x30</a></li>
              </ul>
           </li>
            <li><a href="quienessomos.html">Quiénes Somos</a></li>
            <li><a href="#">Cómo se hace</a></li>
            <li><a href="contacto.html">Contacto</a></li>
        </ul>
  </nav>

Tienes que usar el selector de hermanos '~' para que el hover en link de productos afecte al submenu

1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.