fonte:
vagabundia

"Menú desplegable con CSS3"

Este es un menú desplegable que usa las características del CSS3 y que sólo requiere de una imagen. Lo interesante es que funcionará tambien en navegadores como Internet Explorer, aún cuando estos no soporten las nuevas propiedades; la única diferencia es que no se verán ni sombra ni bordes redondeados ni sombras.

Como siempre, el estilo hay que ponerlo antes de </head> y allí, podremos cambiar los detalles.

<style>
/* el menú es una lista */
#nav {
  background: #678 url(URL_gradient.png  ) repeat-x 0 -110px;
  line-height: 100%;
  margin: 0;
  padding: 7px 6px 0;
  border-radius: 2em;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
  -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
}
#nav li { /* cada item de esa lista */
  float: left;
  list-style: none;
  margin: 0 5px;
  padding: 0 0 8px;
  position: relative;
}

/* las definiciones del Nivel Principal */
#nav a {
  color: #DDD;
  display: block;
  font-weight: bold;
  margin: 0;
  padding:  8px 20px;
  text-decoration: none;
  -webkit-border-radius: 1.6em;
  -moz-border-radius: 1.6em;
  text-shadow: 0 1px 1px rgba(0,0,0, .3);
}
#nav a:hover {
  background: #000;
  color: #FFF;
}

/* efecto hover en el Nivel Principal */
#nav .current a, #nav li:hover > a {
  background: #468 url(URL_gradient.png  ) repeat-x 0 -40px;
  color: #444;
  border-top: solid 1px #F8F8F8;
  -webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
  -moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
  box-shadow: 0 1px 1px rgba(0,0,0, .2);
  text-shadow: 0 1px 0 rgba(255,255,255, 1);
}

/* los subniveles */
#nav ul li:hover a, #nav li:hover li a {
  background: none;
  border: none;
  color: #333;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
}
#nav ul a:hover {
  background: #456 url(URL_gradient.png  ) repeat-x 0 -100px !important;
  color: #fff !important;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  text-shadow: 0 1px 1px rgba(0,0,0, .1);
}

/* el efecto de desplegar */
#nav li:hover > ul {
  display: block;
}

/* las definiciones de los submenues */
#nav ul {
  background: #DDD url(URL_gradient.png  ) repeat-x 0 0;
  border: solid 1px #B4B4B4;
  display: none;
  left: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 35px;
  width: 185px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
  -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
  box-shadow: 0 1px 3px rgba(0,0,0, .3);
}
#nav ul li {
  float: none;
  margin: 0;
  padding: 0;
}
#nav ul a {
  font-weight: normal;
  text-shadow: 0 1px 0 #FFF;
}

/* las definiciones de los submenues internos */
#nav ul ul {
  left: 181px;
  top: -3px;
}

/* bordes redondeados del primer y  último item */
#nav ul li:first-child > a {
  -webkit-border-top-left-radius: 9px;
  -moz-border-radius-topleft: 9px;
  -webkit-border-top-right-radius: 9px;
  -moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
  -webkit-border-bottom-left-radius: 9px;
  -moz-border-radius-bottomleft: 9px;
  -webkit-border-bottom-right-radius: 9px;
  -moz-border-radius-bottomright: 9px;
}

/* definiciones generales */
#nav:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  line-height: 0;
  visibility: hidden;
}
#nav { display: inline-block; } 
html[xmlns] #nav { display: block; }
* html #nav { height: 1%; }
</style>

Inicio
Menu 1
Menu 2
Menu 3
Menu 4

El HTML es una serie de listas anidadas y alli, sólo debemos tener cuidado para que las etiquetas queden correctamente cerradas. El código del ejemplo es el siguiente:

<ul id="nav">
  <li class="current"><a href="javascript:void(0);">Inicio</a></li>
  <li>
    <a href="javascript:void(0);">Menu 1</a>
    <ul>
      <li>
        <a href="javascript:void(0);">Sub Menu 1.1</a>
        <ul>
          <li><a href="javascript:void(0);">Sub Menu 1.1.1</a></li>
          <li><a href="javascript:void(0);">Sub Menu 1.1.2</a></li>
          <li><a href="javascript:void(0);">Sub Menu 1.1.3</a></li>
          <li><a href="javascript:void(0);">Sub Menu 1.1.4</a></li>
        </ul>
      </li>
      <li>
        <a href="javascript:void(0);">Sub Menu 1.2</a>
        <ul>
          <li><a href="javascript:void(0);">Sub Menu 1.2.1</a></li>
        </ul>
      </li>
      <li><a href="javascript:void(0);">Sub Menu 1.3</a></li>
      <li><a href="javascript:void(0);">Sub Menu 1.4</a></li>
    </ul>
  </li>
  <li>
    <a href="javascript:void(0);">Menu 2</a>
    <ul>
      <li>
        <a href="javascript:void(0);">Sub Menu 2.1</a>
        <ul>
          <li><a href="javascript:void(0);">Sub Menu 2.1.1</a></li>
          <li><a href="javascript:void(0);">Sub Menu 2.1.2</a></li>
          <li><a href="javascript:void(0);">Sub Menu 2.1.3</a></li>
        </ul>
      </li>
      <li><a href="javascript:void(0);">Sub Menu 2.2</a></li>
      <li><a href="javascript:void(0);">Sub Menu 2.3</a></li>
      <li>
        <a href="javascript:void(0);">Sub Menu 2.4</a>
        <ul>
          <li><a href="javascript:void(0);">Sub Menu 2.4.1</a></li>
          <li><a href="javascript:void(0);">Sub Menu 2.4.2</a></li>
          <li><a href="javascript:void(0);">Sub Menu 2.4.3</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="javascript:void(0);">Menu 3</a></li>
  <li><a href="javascript:void(0);">Menu 4</a></li>
</ul>

REFERENCIAS:webdesignerwall.com

traduzindo:

"Menu drop-down com CSS3"

Este é um menu dropdown usando CSS3 características e requer apenas uma imagem. Curiosamente, também funciona em navegadores como o Internet Explorer, mesmo que eles não suportam as novas propriedades, a única diferença é que não haverá nenhuma sombra ou sombras ou bordas arredondadas.

Como sempre, o estilo deve ser colocada antes de
</ head> e lá, nós podemos mudar os detalhes.

ver código:


<style>
/* el menú es una lista */
#nav {
  background: #678 url(URL_gradient.png  ) repeat-x 0 -110px;
  line-height: 100%;
  margin: 0;
  padding: 7px 6px 0;
  border-radius: 2em;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
  -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
}
#nav li { /* cada item de esa lista */
  float: left;
  list-style: none;
  margin: 0 5px;
  padding: 0 0 8px;
  position: relative;
}

/* las definiciones del Nivel Principal */
#nav a {
  color: #DDD;
  display: block;
  font-weight: bold;
  margin: 0;
  padding:  8px 20px;
  text-decoration: none;
  -webkit-border-radius: 1.6em;
  -moz-border-radius: 1.6em;
  text-shadow: 0 1px 1px rgba(0,0,0, .3);
}
#nav a:hover {
  background: #000;
  color: #FFF;
}

/* efecto hover en el Nivel Principal */
#nav .current a, #nav li:hover > a {
  background: #468 url(URL_gradient.png  ) repeat-x 0 -40px;
  color: #444;
  border-top: solid 1px #F8F8F8;
  -webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
  -moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
  box-shadow: 0 1px 1px rgba(0,0,0, .2);
  text-shadow: 0 1px 0 rgba(255,255,255, 1);
}

/* los subniveles */
#nav ul li:hover a, #nav li:hover li a {
  background: none;
  border: none;
  color: #333;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
}
#nav ul a:hover {
  background: #456 url(URL_gradient.png  ) repeat-x 0 -100px !important;
  color: #fff !important;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  text-shadow: 0 1px 1px rgba(0,0,0, .1);
}

/* el efecto de desplegar */
#nav li:hover > ul {
  display: block;
}

/* las definiciones de los submenues */
#nav ul {
  background: #DDD url(URL_gradient.png  ) repeat-x 0 0;
  border: solid 1px #B4B4B4;
  display: none;
  left: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 35px;
  width: 185px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
  -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
  box-shadow: 0 1px 3px rgba(0,0,0, .3);
}
#nav ul li {
  float: none;
  margin: 0;
  padding: 0;
}
#nav ul a {
  font-weight: normal;
  text-shadow: 0 1px 0 #FFF;
}

/* las definiciones de los submenues internos */
#nav ul ul {
  left: 181px;
  top: -3px;
}

/* bordes redondeados del primer y  último item */
#nav ul li:first-child > a {
  -webkit-border-top-left-radius: 9px;
  -moz-border-radius-topleft: 9px;
  -webkit-border-top-right-radius: 9px;
  -moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
  -webkit-border-bottom-left-radius: 9px;
  -moz-border-radius-bottomleft: 9px;
  -webkit-border-bottom-right-radius: 9px;
  -moz-border-radius-bottomright: 9px;
}

/* definiciones generales */
#nav:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  line-height: 0;
  visibility: hidden;
}
#nav { display: inline-block; } 
html[xmlns] #nav { display: block; }
* html #nav { height: 1%; }
</style>

HTML é uma série de listas aninhadas e ali, só temos de ter cuidado para que as marcas estão devidamente fechadas.

O código é o seguinte:

<ul id="nav">
<li class="current"><a href="javascript:void(0);">Inicio</a></li>
<li>
<a href="javascript:void(0);">Menu 1</a>
<ul>
<li>
<a href="javascript:void(0);">Sub Menu 1.1</a>
<ul>
<li><a href="javascript:void(0);">Sub Menu 1.1.1</a></li>
<li><a href="javascript:void(0);">Sub Menu 1.1.2</a></li>
<li><a href="javascript:void(0);">Sub Menu 1.1.3</a></li>
<li><a href="javascript:void(0);">Sub Menu 1.1.4</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">Sub Menu 1.2</a>
<ul>
<li><a href="javascript:void(0);">Sub Menu 1.2.1</a></li>
</ul>
</li>
<li><a href="javascript:void(0);">Sub Menu 1.3</a></li>
<li><a href="javascript:void(0);">Sub Menu 1.4</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">Menu 2</a>
<ul>
<li>
<a href="javascript:void(0);">Sub Menu 2.1</a>
<ul>
<li><a href="javascript:void(0);">Sub Menu 2.1.1</a></li>
<li><a href="javascript:void(0);">Sub Menu 2.1.2</a></li>
<li><a href="javascript:void(0);">Sub Menu 2.1.3</a></li>
</ul>
</li>
<li><a href="javascript:void(0);">Sub Menu 2.2</a></li>
<li><a href="javascript:void(0);">Sub Menu 2.3</a></li>
<li>
<a href="javascript:void(0);">Sub Menu 2.4</a>
<ul>
<li><a href="javascript:void(0);">Sub Menu 2.4.1</a></li>
<li><a href="javascript:void(0);">Sub Menu 2.4.2</a></li>
<li><a href="javascript:void(0);">Sub Menu 2.4.3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="javascript:void(0);">Menu 3</a></li>
<li><a href="javascript:void(0);">Menu 4</a></li>
</ul>

REFERÊNCIAS:webdesignerwall.com

fonte e créditos:http://vagabundia.blogspot.com/

Continue Lendo ►

#digital clinica de websites - dcdw -

digital clinica de websites

digital clinica de websites

digital clinica de websites

digital clinica dewebsites

Dicas

Pesquisar

"Dropdown menu com CSS3 "..."menu dropdown que usa os recursos CSS3"...

"Menú desplegable con CSS3"

Page Header (Do Not Edit Here)

Popular Posts

Marcadores

Arquivados

Recent Posts

Postagem em destaque

dicas para blogs

Seguidores

estatísticas

categoria

Pages

Translate

contato