Menu Horizontal Responsive HTML5 CSS3 - Educa Sistemas

Breaking

Post Top Ad

Post Top Ad

viernes, 30 de junio de 2017

Menu Horizontal Responsive HTML5 CSS3







Les compartimos el codigo para que lo puedan utilizar a gusto .




Codigo:
<style>
.dropdownmenu ul, .dropdownmenu li {
  margin: 0;
  padding: 0;
}
.dropdownmenu ul {
  background: gray;
  list-style: none;
  width: 100%;
}
.dropdownmenu li {
  float: left;
  position: relative;
  width:auto;
}
.dropdownmenu a {
  background: #30A6E6;
  color: #FFFFFF;
  display: block;
  font: bold 12px/20px sans-serif;
  padding: 10px 25px;
  text-align: center;
  text-decoration: none;
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}
.dropdownmenu li:hover a {
  background: #000000;
}
#submenu {
  left: 0;
  opacity: 0;
  position: absolute;
  top: 35px;
  visibility: hidden;
  z-index: 1;
}
li:hover ul#submenu {
  opacity: 1;
  top: 40px;  
  visibility: visible;
}
#submenu li {
  float: none;
  width: 100%;e
}
#submenu a:hover {
  background: #DF4B05;
}
#submenu a {
  background-color:#000000;
}
</style>



<nav class="dropdownmenu">
 <ul>
   <li><a href="">Inicio</a></li>
   <li><a href="">Prueba</a></li>
   <li><a href="#">Programacion</a>
     <ul id="submenu">
       <li><a href="">HTML5</a></li>
       <li><a href="">CSS3</a></li>
       <li><a href="">JAVASCRIPT</a></li>
     </ul>
   </li>
   <li><a href="">Videos</a></li>
   <li><a href="">ContactO</a></li>
 </ul>
</nav>

No hay comentarios:

Publicar un comentario

Post Top Ad

Responsive Ads Here