Simple menú desplegable con CSS

►Este es un ejemplo sencillo para crear un menú desplegable que puede incluir submenús, que usa las posibilidades que nos brindan las nuevas propiedades del CSS3.

• inicio
• un item
• un submenú
  • submenú 1
  • submenú 2
  • submenú 3
• otro item
• otro

Como casi cualquier otro, el HTML se arma en una lista, utilizando etiquetas UL y LI que, se anidan si es que queremos crear un submenú. Esta sería una lista standard:

<ul class="mi-menu">
  <li><a href="URL_enlace_1"> texto_enlace_1 </a></li>
  <li><a href="URL_enlace_2"> texto_enlace_2 </a></li>
  <li><a href="URL_enlace_3"> texto_enlace_3 </a></li>
</ul>

y si quisiéramos que uno de esos enlaces fuera un submenú:

<ul class="mi-menu">
  <li><a href="URL_enlace_1"> texto_enlace_1 </a></li>
  <li>
    <a href="#"> texto_enlace_2 </a>
    <ul>
      <li><a href="URL_enlace_2.1"> texto_submenú_2.1 </a></li>
      <li><a href="URL_enlace_2.2"> texto_submenú_2.2 </a></li>
      <li><a href="URL_enlace_2.3"> texto_submenú_2.3 </a></li>
    </ul>
  <li><a href="URL_enlace_3"> texto_enlace_3 </a></li>
</ul>

Así como está, veríamos algo similar a esto:

• texto_enlace_1
• texto_enlace_2
  • texto_submenú_2.1
  • texto_submenú_2.2
  • texto_submenú_2.3
• texto_enlace_3

Y ahora, el CSS que hará que esa lista se transforme en otra cosa:

• inicio
• un item
• un submenú
  • submenú 1
  • submenú 2
  • submenú 3
• otro item
• otro
• último

<style type="text/css">
  /* el menú en si mismo */
  .mi-menu  {
    border-radius: 5px;
    list-style-type: none;
    margin: 0 auto; /* si queremos centrarlo */
    padding: 0;
    /* la altura y su ancho dependerán de los textos */
    height: 40px; 
    width: 510px;
    /* el color de fondo */
    background: #555;
    background: -moz-linear-gradient(#555,#222);
    background: -webkit-linear-gradient(#555,#222);
    background: -o-linear-gradient(#555,#222);
    background: -ms-linear-gradient(#555,#222);
    background: linear-gradient(#555,#222);
  }

  /* si es necesario, evitamos que Blogger de problemas con los saltos de línea cuando escribimos el HTML */
  .mi-menu  br { display:none; }

  /* cada item del menu */
  .mi-menu  li {
    display: block;
    float: left; /* la lista se ve horizontal */
    height: 40px;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
  }
  .mi-menu li a {
    border-left: 1px solid #000;
    border-right: 1px solid #666;
    color: #EEE;
    display: block;
    font-family: Tahoma;
    font-size: 13px;
    font-weight: bold;
    line-height: 28px;
    padding: 0 14px;
    margin: 6px 0;
    text-decoration: none;
    /* animamos el cambio de color de los textos */
    -webkit-transition: color .2s ease-in-out;
    -moz-transition: color .2s ease-in-out;
    -o-transition: color .2s ease-in-out;
    -ms-transition: color .2s ease-in-out;
    transition: color .2s ease-in-out;
  }
  /* eliminamos los bordes del primer y el último */
  .mi-menu li:first-child a { border-left: none; }
  .mi-menu li:last-child a{ border-right: none; }
  /* efecto hover cambia el color */
  .mi-menu li:hover > a { color: Crimson; }

  /* los submenús */
  .mi-menu ul {
    border-radius: 0 0 5px 5px;
    left: 0;
    margin: 0;
    opacity: 0; /* no son visibles */
    position: absolute;
    top: 40px; /* se ubican debajo del enlace principal */
    /* el color de fondo */
    background: #222;
    background: -moz-linear-gradient(#222,#555);
    background: -webkit-linear-gradient(#22,#555);
    background: -o-linear-gradient(#222,#555);
    background: -ms-linear-gradient(#222,#555);
    background: linear-gradient(#222,#555);
    /* animamos su visibildiad */
    -moz-transition: opacity .25s ease .1s;
    -webkit-transition: opacity .25s ease .1s;
    -o-transition: opacity .25s ease .1s;
    -ms-transition: opacity .25s ease .1s;
    transition: opacity .25s ease .1s;
  }
  /* son visibes al poner el cursor encima */
  .mi-menu li:hover > ul { opacity: 1; }

   /* cada un ode los items de los submenús */
  .mi-menu ul li {
    height: 0; /* no son visibles */
    overflow: hidden;
    padding: 0;
    /* animamos su visibildiad */
    -moz-transition: height .25s ease .1s;
    -webkit-transition: height .25s ease .1s;
    -o-transition: height .25s ease .1s;
    -ms-transition: height .25s ease .1s;
    transition: height .25s ease .1s;
  }
  .mi-menu li:hover > ul li {
    height: 36px; /* los mostramos */
    overflow: visible;
    padding: 0;
  }
  .mi-menu ul li a {
    border: none;
    border-bottom: 1px solid #111;
    margin: 0;
    /* el ancho dependerá de los textos a utilizar */
    padding: 5px 20px;
    width: 100px;
  }
  /* el último n otiene un borde */
  .mi-menu ul li:last-child a { border: none; }

</style>

http://vagabundia.blogspot.com/2012/05/simple-menu-desplegable-con-css.html

Меню для "Та,которая ..."

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8NmIEi56ayqQ8MixZcj48gYVrEi6xLcX2-2ysAdM3LJQ63OUPJLxAxThTLtPEWK5yvB8I5nWaU2tEoraUxfNnpUnDMmwjhyK6dCy_NAmsM0ycrVGbi6humFK9mWOR1QKJ3AedV5c-UIE/s320/e088cf6d2f02.gif



https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglyr0PtODx1BvJL0PnRQGlbYXWuZQeJSNzdmSM-vpRWXlpYS1-BX48Ou7FHVZzOe7449ofhRGfsR0FaxqHDcqga5W3rMNj8cU6L8qqoBu0Tlkd0GUzy0SE84dC1fp2qWrQq271mK30pxU/s320/43c504cf53e4.gif



<style type='text/css'>

.ddoverlap{
border-bottom: 1px solid #bbb8a9;
}

.ddoverlap ul{
padding: 0;
margin: 0;
font: bold 90% default;
list-style-type: none;
}

.ddoverlap li{
display: inline;
margin: 0;
}

.ddoverlap li a{
padding: 3px 7px;
text-decoration: none;
padding-right: 32px; /*extra right padding to account for curved right edge of tab image*/
color: black;
background: transparent url(http://s017.radikal.ru/i406/1110/2e/e088cf6d2f02.gif) 100% 1px no-repeat; /*give illusion of shifting 1px down vertically*/
border-left: 1px solid #dbdbd5;
position: relative;
display: block;
float: left;
margin-left: -20px; /*shift tabs 20px to the left so they overlap*/
left: 20px;
}

.ddoverlap li a:visited{
color: black;
}

.ddoverlap li a:hover{
text-decoration: underline;
}

.ddoverlap li.selected a{ /*selected tab style*/
color: black;
z-index: 100; /*higher z-index so selected tab is topmost*/
top: 1px; /*Shift tab 1px down so the border beneath it is covered*/
background: transparent url(http://s017.radikal.ru/i421/1110/bf/43c504cf53e4.gif) 100% 0 no-repeat;
}

.ddoverlap li.selected a:hover{
text-decoration: none;
}

</style>

<!--[if IE]>
<style type="text/css">
.ddoverlap{
height: 1%;  /*Apply Holly 3px jog hack to get IE to position bottom border correctly beneath the menu*/
}
 </style>
<![endif]-->

Добавляем новый гаджет и вставляем код:

<div class="ddoverlap">
<ul>
<li><a href="http://foglia-foglia.blogspot.com/">Home</a></li>
<li><a href="http://fogliafoto.blogspot.com/2011/10/blog-post_13.html">Photo</a></li>

</ul>
<br style="clear: left" />
</div>





Меню для " То были капли.."

<ul id="blue">
<li class="current"><a rel="tag" href="http://fogliablog.blogspot.com/">Home<span>Página inicial</span></a></li>
<li><a title="" href="ENDEREÇO">Sobre o blog<span>Texto correspondente</span></a></li>
<li><a title="" href="ENDEREÇO">Portfolio<span>Texto correspondente</span></a></li>
<li><a title="" href="ENDEREÇO">Link<span>Texto correspondente</span></a></li>
<li><a title="" href="ENDEREÇO">Contato<span>Deixe seu recado </span></a></li>
</ul>

Перед ]]></b:skin> вставляем:

/* Navegação
----------------------------------------------- */
ul#blue {
text-align:left;
margin:0;
padding:30px;
list-style-type:none;
}

ul#blue li {
position:relative;
float:left;
border-top:2px solid #efefef;
margin-right:15px;
padding-right:20px;
padding-top:5px;
}

ul#blue .current {
border-top:2px solid #3d496a;
}

ul#blue li:hover {
border-top:2px solid #3d496a;
}

ul#blue li a {
padding:2px;
text-decoration:none;
font:bold 12px Verdana, Georgia, "Times New Roman", Times, serif;
color:#68759c;


}

ul#blue li a:hover {
color:#8895b8;
border:none;
}

ul#blue li span {
display:none;
position:absolute;
top:20px;
left:2px;
width:160px;
font:normal 9px Verdana, Georgia, "Times New Roman", Times, serif;
line-height:15px;
}

ul#blue li a:hover span {
margin-top:7px;
display:block;
color:#8895b8;
}

#showlink {
display:block;
float:right;
font-size:12px;
font-style:italic;
text-decoration:none;
padding:0 20px 0 0;
text-shadow:0 1px 0 #f9f9f9;
}

#showlink a,#showlink a:visited {
color:#42536C;
font-weight:700;
}

#showlink a:hover {
color:#5B7395;
text-decoration:underline;
}