3

Estoy confundido porque aun no logro hacer que mi submenú se muestre al pasar el ratón por encima del menú principal, no se si es un error en el código de HTML o no he sabido organizar el estilo de CSS

Este es mi código:

*{
  margin: 0px;
  padding: 0px;
  font-family: cursive;
  font-weight: lighter;
}

.menu{
  position: fixed;
  width: 250px;
  height: 100%;
  background-color: black;
}

.menu ul{
  margin-top: 150px;
  list-style: none;
  display: block;
}

.menu li{
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #737373;
  overflow: hidden;
}

.menu ul li a{
  position: relative;
  padding: 16px;
  padding-right: 25px;
  float: right;
  color: white;
  opacity: .8;
  font-size: 1.2em;
  -webkit-transition: opacity .2s;
}



div.barra1{
  position: absolute;
  height: 50px;
  width: 0px;
  background-color: #00A4EF;
  opacity: .5;
  -webkit-transition: width .2s;
  background-image: url(../img/inicio-icon.png);
  background-repeat: no-repeat;
  background-position: 15px 15px;
}

li:hover div.barra1{
  width: 250px;
}


div.barra2{
  position: absolute;
  height: 50px;
  width: 0px;
  background-color: #00A4EF;
  opacity: .5;
  -webkit-transition: width .2s;
  background-image: url(../img/nosotros-icon.png);
  background-repeat: no-repeat;
  background-position: 15px 15px;
}

li:hover div.barra2{
  width: 250px;
}


div.barra3{
  position: absolute;
  height: 50px;
  width: 0px;
  background-color: #00A4EF;
  opacity: .5;
  -webkit-transition: width .2s;
  background-image: url(../img/servicios-icon.png);
  background-repeat: no-repeat;
  background-position: 15px 15px;
}

li:hover div.barra3{
  width: 250px;
}



div.barra4{
  position: absolute;
  height: 50px;
  width: 0px;
  background-color: #00A4EF;
  opacity: .5;
  -webkit-transition: width .2s;
  background-image: url(../img/contactos-icon.png);
  background-repeat: no-repeat;
  background-position: 15px 15px;
}

li:hover div.barra4{
  width: 250px;
}

.menu li div .p{
  opacity: 1;
}



div.barra5{
  position: absolute;
  height: 50px;
  width: 0px;
  background-color: #00A4EF;
  opacity: .5;
  -webkit-transition: width .2s;
  background-image: url(../img/iniciosesion-icon.png);
  background-repeat: no-repeat;
  background-position: 15px 15px;
}

li:hover div.barra5{
  width: 250px;
}
<nav class="menu">
  <ul>
    <li><div class="barra1"></div>
      <a href="">Inicio</a></li>

      <li><div class="barra2"></div>
        <a href="">Nosotros</a>
        <ul>
          <li><a href="">Galeria de Fotos</a></li>
          <li><a href="">Misión y Visión</a></li>
          <li><a href="">Valores Corporativos</a></li>
        </ul>
      </li>

      <li><div class="barra3"></div>
        <a href="">Servicios</a>
        <ul>
         <div class="barra3.3"></div>
         <li><a href="">Principales</a></li>
         <li><a href="">Online</a></li>
       </ul>
     </li>

     <li><div class="barra4"></div>
      <a href="">Contacto</a>
      <ul>
        <div class="barra4.4"></div>
        <li><a href="">Sugerencias y Reclamos</a></li>
        <li><a href="">Ubicación Principal</a></li>
      </ul>
    </li>
    
    <li><div class="barra5"></div>
      <a href="">Suscribete</a>
      <ul>
       <div class="barrar5.5">
        <li><a href="">Iniciar Seccion</a></li>
        <li><a href="">Registrarse</a></li>
        </div>
      </ul>
    </li>
  </ul>
</nav>

2
  • 1
    En lugar del contenido de relleno, pudieras agregar cual es el resultado esperado y cual es el resultado que al momento obtienes :D
    – user128299
    Commented el 21 sept. 2019 a las 3:04
  • 1
    muchas gracias lo are Commented el 21 sept. 2019 a las 3:05

1 respuesta 1

4

Tengo la solución para mostrar el submenu.

Te faltaba colocar otras reglas en el css para que apareciera el submenu, ademas de las necesarias para ocultarla y mostrarse en la posicion correcta.

1) En las primeras lineas de CSS esta la construccion del menu

2) Las siguiente son para la decoracion y efecto

Documente el codigo de las reglas de CSS para que puedas manejarlo y lo combine con las reglas que ya tenias para su diseño.

Aqui esta el codigo funcionando:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
  /*  construcion del menu horizontal desplegable */
  .menu ul {
      list-style: none; /* quita el estilo de las listas no ordenada UL*/
  }
  .menu ul li {
      padding:  15px; /* espaciado de contenido en los li */
      position: relative; 
      width: 250px; /* ancho de los items del menu li */
      /* background-color: lightblue; */
      /* border-top:  1px solid #BDC3C7; */
  }
  .menu ul ul {
      transition: all 0.3s;
      opacity: 0; 
      position: absolute;  /* quita el espacio que ocupan los SUb UL vertical hijos */
      visibility: hidden;  /* oculta los UL hijos */
      /* posicion donde aparecera el submenu */
      left: 100%; /* antes 82.5 % */
      top: 0%;
  }

  /*  muestra los UL hijos al estar sobre un ul li padre */
  /*  aparece el submenu */
  .menu ul li:hover > ul {
      opacity: 1;   
      visibility: visible;
  }
  .menu ul li a {
     /* color: #ffffff; */
      text-decoration: none; /* quita el estilo del anchor subrayado */
  }

 /* resaltado para los LI de SUBMENU al estar el cursor */
.menu ul li ul li:hover {
    background-color: #00A4EF;
}

/* -------------------------*/
/* Aplicando diseño al menu */
*{
    margin: 0px;
    padding: 0px;
    font-family: cursive;
    font-weight: lighter;
}

.menu {
    position: fixed;
    width: 280px;
    height: 100%;
    background-color: black;
}

.menu{
   padding-top: 150px;
}

.menu li{
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #737373;
}

.menu ul li a{
    position: relative;
    padding: 16px;
    padding-right: 25px;
    float: right;
    color: white;
    opacity: .8;
    font-size: 1.2em;
    transition: opacity .2s;
}


div.barra1{
    position: absolute;
    height: 50px;
    width: 0px;
    background-color: #00A4EF;
    opacity: .5;
    transition: width .2s;
    background-image: url(../img/inicio-icon.png);
    background-repeat: no-repeat;
    background-position: 15px 15px;
}

li:hover div.barra1{
    width: 250px;
}


div.barra2{
    position: absolute;
    height: 50px;
    width: 0px;
    background-color: #00A4EF;
    opacity: .5;
    transition: width .2s;
    background-image: url(../img/nosotros-icon.png);
    background-repeat: no-repeat;
    background-position: 15px 15px;
}

li:hover div.barra2{
    width: 250px;
}

div.barra3{
    position: absolute;
    height: 50px;
    width: 0px;
    background-color: #00A4EF;
    opacity: .5;
    transition: width .2s;
    background-image: url(../img/servicios-icon.png);
    background-repeat: no-repeat;
    background-position: 15px 15px;
}

li:hover div.barra3{
    width: 250px;
}

div.barra4{
    position: absolute;
    height: 50px;
    width: 0px;
    background-color: #00A4EF;
    opacity: .5;
    transition: width .2s;
    background-image: url(../img/contactos-icon.png);
    background-repeat: no-repeat;
    background-position: 15px 15px;
}

li:hover div.barra4{
    width: 250px;
}


div.barra5{
    position: absolute;
    height: 50px;
    width: 0px;
    background-color: #00A4EF;
    opacity: .5;
    transition: width .2s;
    background-image: url(../img/iniciosesion-icon.png);
    background-repeat: no-repeat;
    background-position: 15px 15px;
}

li:hover div.barra5{
    width: 250px;
}


.menu ul li ul li {
       background-color: black; 
  }
</style>
<body>
    <nav class="menu">
        <ul>
          <li>  <div class="barra1"></div>
                <a href="">Inicio</a>
          </li>
    
          <li>
               <div class="barra2"></div>
               <a href="">Nosotros</a>
                <ul>
                        <li><a href="">Galeria de Fotos</a></li>
                        <li><a href="">Misión y Visión</a></li>
                        <li><a href="">Valores Corporativos</a></li>
                </ul>
          </li>
    
          <li>
               <div class="barra3"></div>
               <a href="">Servicios</a>
                <ul>
                   <div class="barra3.3"></div>
                        <li><a href="">Principales</a></li>
                        <li><a href="">Online</a></li>
                </ul>
          </li>
    
          <li>
                <div class="barra4"></div>
                 <a href="">Contacto</a>
                <ul>
                    <div class="barra4.4"></div>
                        <li><a href="">Sugerencias y Reclamos</a></li>
                        <li><a href="">Ubicación Principal</a></li>
                </ul>
          </li>
    
          <li>
               <div class="barra5"></div>
               <a href="">Suscribete</a>
                <ul>
                   <div class="barrar5.5">
                        <li><a href="">Iniciar Seccion</a></li>
                        <li><a href="">Registrarse</a></li>
                   </div>
                </ul>
          </li>
    
    
        </ul>
      </nav>
</body>
</html>

Ejecutar en pagina completa

Tu Respuesta

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

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