Otro menú desplegable con CSS

Este es un menú desplegable muy simple que usa algunas técnicas de CSS3 que lo hacen llamativo en algunos navegadores pero al que podemos modificar un poco para que funcione bien en cualquier navegador.

+Seleccione una opción del menú

• Suscripción Feeds RSS
• Vagabundia en Twitter
• Suscripción por E-Mail

El HTML no tiene muchos misterios; en un DIV con una clase a la que llamamos drop-menu, colocamos un SPAN que es lo que nos servirá para desplegar y contraer el menú que está en una lista ordenada:

<div class="drop-menu">
  <span class="plus">+</span>Seleccione una opción del menú
  <ul class="sub-menu">
    <li><a href="URL1"><img src="URL_imagen1"/>Texto enlace 1</a></li>
    <li><a href="URL2"><img src="URL_imagen2"/>Texto enlace 2</a></li>
    <li><a href="URL3"><img src="URL_imagen2"/>Texto enlace 3</a></li>
  </ul>
</div>

Como siempre, la clave está en el CSS y allí hay muchas variantes. Este sería el necesario para realizar el ejemplo:

.drop-menu {
  background-color: #242F3A;
  border: 1px solid #343F4A;
  cursor: pointer;
  display: block;
  font-family: Tahoma;
  font-size: 20px;
  height: 25px;
  letter-spacing: -1px;
  margin: 0 auto;
  max-height: 25px;
  padding: 10px;
  position: relative;
  text-align: left;
  width: 300px;
  z-index: 1000;
}
.plus {
  display: inline-block;
  font-family: Georgia;
  font-size: 22px;
  font-weight: bold;
  margin-right: 10px;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  -webkit-transition: .3s ease-in-out;
}
.drop-menu:hover {}
.drop-menu:hover .sub-menu {
  display: inline-block;
}
.drop-menu:hover .plus {
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
.sub-menu {
  background-color: #242F3A;
  background:image: -moz-linear-gradient(100% 100%  90deg, #000000, #242F3A);
  background-image: -webkit-gradient(linear, left bottom, left top, from(#000000), to(#242F3A));
  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF242F3A', EndColorStr='#FF000000');
  border: 1px solid #343F4A;
  display: none;
  border-top: none;
  margin-left: -11px !important;
  margin-top: 5px;
  padding: 10px;
  width: 300px;
}
.sub-menu li {
  display: block;
  font-size: 20px;
  height: 22px;
  list-style-type: none;
  padding: 8px 0;
}
.sub-menu li img {
  margin-right: 10px;
  vertical-align: top;
}
.sub-menu li:hover {}
.sub-menu a {
  color: #DDD;
  font-size: 20px;
  font-family: Tahoma
}
.sub-menu a:hover {
  color: #ABC;
}

REFERENCIAS:webstuffshare.com