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>