Blog de proves

menú 1

<style>

/*------Stard by Ayudadeblogger.com--------*/

#ayudadeblogger-menu, #ayudadeblogger-menu ul {

margin: 0;

padding: 0;

list-style: none;

}

#ayudadeblogger-menu {

width: 960px;

margin: 60px auto;

border: 1px solid #222;

background-color: #111;

background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));

-moz-border-radius: 6px;

-webkit-border-radius: 6px;

border-radius: 6px;

-moz-box-shadow: 0 1px 1px #777;

-webkit-box-shadow: 0 1px 1px #777;

box-shadow: 0 1px 1px #777;

}

#ayudadeblogger-menu:before,

#ayudadeblogger-menu:after {

content: "";

display: table;

}

#ayudadeblogger-menu:after {

clear: both;

}

#ayudadeblogger-menu {

zoom:1;

}

#ayudadeblogger-menu li {

float: left;

border-right: 1px solid #222;

-moz-box-shadow: 1px 0 0 #444;

-webkit-box-shadow: 1px 0 0 #444;

box-shadow: 1px 0 0 #444;

position: relative;

}

#ayudadeblogger-menu a {

float: left;

padding: 12px 30px;

color: #999;

text-transform: uppercase;

font: bold 12px Arial, Helvetica;

text-decoration: none;

text-shadow: 0 1px 0 #000;

}

#ayudadeblogger-menu li:hover > a {

color: #fafafa;

}

*html #ayudadeblogger-menu li a:hover { /* IE6 only */

color: #fafafa;

}

#ayudadeblogger-menu ul {

margin: 20px 0 0 0;

_margin: 0; /*IE6 only*/

opacity: 0;

visibility: hidden;

position: absolute;

top: 38px;

left: 0;

z-index: 9999;

background: #444;

background: -moz-linear-gradient(#444, #111);

background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));

background: -webkit-linear-gradient(#444, #111);

background: -o-linear-gradient(#444, #111);

background: -ms-linear-gradient(#444, #111);

background: linear-gradient(#444, #111);

-moz-box-shadow: 0 -1px rgba(255,255,255,.3);

-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);

box-shadow: 0 -1px 0 rgba(255,255,255,.3);

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

border-radius: 3px;

-webkit-transition: all .2s ease-in-out;

-moz-transition: all .2s ease-in-out;

-ms-transition: all .2s ease-in-out;

-o-transition: all .2s ease-in-out;

transition: all .2s ease-in-out;

}

#ayudadeblogger-menu li:hover > ul {

opacity: 1;

visibility: visible;

margin: 0;

}

#ayudadeblogger-menu ul ul {

top: 0;

left: 150px;

margin: 0 0 0 20px;

_margin: 0; /*IE6 only*/

-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);

-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);

box-shadow: -1px 0 0 rgba(255,255,255,.3);

}

#ayudadeblogger-menu ul li {

float: none;

display: block;

border: 0;

_line-height: 0; /*IE6 only*/

-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;

-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;

box-shadow: 0 1px 0 #111, 0 2px 0 #666;

}

#ayudadeblogger-menu ul li:last-child {

-moz-box-shadow: none;

-webkit-box-shadow: none;

box-shadow: none;

}

#ayudadeblogger-menu ul a {

padding: 10px;

width: 130px;

_height: 10px; /*IE6 only*/

display: block;

white-space: nowrap;

float: none;

text-transform: none;

}

#ayudadeblogger-menu ul a:hover {

background-color: #B40404;

background-image: -webkit-gradient(linear, left top, left bottom, from(#B40404), to(#B40404));

}

#ayudadeblogger-menu ul li:first-child > a {

-moz-border-radius: 3px 3px 0 0;

-webkit-border-radius: 3px 3px 0 0;

border-radius: 3px 3px 0 0;

}

#ayudadeblogger-menu ul li:first-child > a:after {

content: '';

position: absolute;

left: 40px;

top: -6px;

border-left: 6px solid transparent;

border-right: 6px solid transparent;

border-bottom: 6px solid #444;

}

#ayudadeblogger-menu ul ul li:first-child a:after {

left: -6px;

top: 50%;

margin-top: -6px;

border-left: 0;

border-bottom: 6px solid transparent;

border-top: 6px solid transparent;

border-right: 6px solid #3b3b3b;

}

#ayudadeblogger-menu ul li:first-child a:hover:after {

border-bottom-color: #B40404;

}

#ayudadeblogger-menu ul ul li:first-child a:hover:after {

border-right-color: #B40404;

border-bottom-color: transparent;

}

#ayudadeblogger-menu ul li:last-child > a {

-moz-border-radius: 0 0 3px 3px;

-webkit-border-radius: 0 0 3px 3px;

border-radius: 0 0 3px 3px;

}

</style>

<li><a href="/">Inicio</a></li>

<li>

<a href="#">Temas</a>

<ul>

<li><a href="#">Farandula</a></li>

<li><a href="#">Deportes</a></li>

<li><a href="#">Entretenimiento</a></li>

<li><a href="#">Musica</a></li>

</ul>

Menú 2

<div id="menuhorizontal">
<ul id="menuh">
   <li><a href="#">Inici</a></li>
   <li><a href="#">Contace</a></li>
</ul>
</div>
<style type="text/css">
#menuh {
    background: #333;
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 50%;
}
#menuh li {
    float: left;
    font: 67.5% "Lucida Sans Unicode", "Trebuchet MS", Arial, Verdana;
    margin: 0;
    padding: 0;
}
#menuh a {
    background: #333 url(http://i825.photobucket.com/albums/zz180/latrucoteca/seperator.gif) bottom right no-repeat;
    color: #ccc;
    display: block;
    float: left;
    margin: 0;
    padding: 8px 12px;
    text-decoration: none;
    font-weight:normal;
}
#menuh a:hover {
    background: #2580a2 url(http://i825.photobucket.com/albums/zz180/latrucoteca/hover.gif) bottom center no-repeat;
    color: #fff;
    padding-bottom: 8px;
    }
</style>

Menú 3

<div id="menuhoriz"><ul><li>Botón uno</li>

<li>Botón dos</li>

<li>Botón tres</li>

</ul></div>

#menuhoriz ul li {

display: inline;

padding: 2px 7px; /* Separar el texto */

margin:5px; /* Cambialo para separar los botones */

background-color:#ccc; /* El color de fondo */

}

#menuhoriz ul li:hover {

background-color:#3d3d3d; /* Color de fondo cuando el cursor este ensima */

cursor: pointer; /* cambiar el aspecto del puntero */

color:#fff; /*Color de la letra*/

}

#menuhoriz ul {/* Linea para delimitar la botonera */

border-bottom-width: 1px;

border-bottom-style: solid;

border-bottom-color: #ccc;

}

</style>

Menú 5
<div class='navcontainer'>
<ul id='nav'>

<li class='current-cat'><a href='#LINK'>Inicio</a></li>
<li class='cat-item'><a href='#LINK'>Tutoriales</a></li>
<li class='cat-item'><a href='#LINK'>Blogger</a></li>
<li class='cat-item'><a href='#LINK'>Acerca de...</a></li>
<li class='cat-item'><a href='#LINK'>Contacto</a></li>
</ul>
</div>
<style type="text/css">
.navcontainer {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxOpcY4CmbjMsLVl31PZcZbd4Ykd_VzlC7nZ-uHhTsNMjvULwRdBni4_jjI0FKXD7DNYuwFAo8eEeiD54Aexdw2trtMnPms-sS6J-6O4jGqPR1Rxr_PcWv2MhlWBZGo3rgbB0ZyIjVMkWS/s1600/menu.png);
float:left;
margin-top:-62px;
width:995px;
}
#nav {
height: 38px;
list-style-type: none;
margin: 0;
overflow: hidden;
padding: 0;
font-family: Arial,"Trebuchet MS",franklin gothic medium;
}
#nav ul {
float: left;
list-style-type: none;
margin: 0;
padding: 0;
}
#nav li {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicR7zFNhP_XjhQO9DdOQ1B7lF9kcAbyxruee0fKGW26nSIrLKR_kNDX8eiepXKcTmHXJ8AIiX4Xz3Id7KxyTuTgKJJMp1kqK5CVPmnM260nUxg711TusC4sP5sohT0Le4SHrmFL17k87PA/s1600/linea.png") no-repeat scroll right 0 transparent;
float: left;
list-style-type: none;
margin: 0;
padding-right: 2px;
}
#nav ul li {
list-style-type: none;
margin: 0;
padding: 0;
}
#nav li a:link, #nav li a:visited {
color: #000000;
display: block;
font-size: 12px;
font-weight: bold;
padding: 11px 14px;
text-decoration: none;
text-transform: uppercase;
}
#nav li a:hover {
color: #CA5518;
text-decoration:none;
background-color: #F03128;
color: #ffffff;
background:-moz-linear-gradient(center top , #72A6DA, #2D6BA8) repeat scroll 0 0 transparent;
}
.navcontainer1 {
height:35px;
margin-top:-33px;
width:970px;
float:left;
}
#nav1 {
height:30px;
}
#nav1, #nav1 ul {
line-height:1;
list-style-image:none;
list-style-type:none;
margin:0;
padding:0;
}
#nav1 ul {
float:left;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
}
#nav1 li {
float:left;
font-size: 0.9em;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
}
#nav1 ul li {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
}
#nav1 li a {
color: #020234;
display: block;
padding: 10px 14px;
text-decoration: none;
text-shadow: 0 1px 1px #BBBBBB;
}
#nav1 li a:hover {
color: #FFFFFF;
text-decoration: none;
}
#nav1 li:hover, #nav1 li.sfhover {
position:static;
}
#nav .children{
display:none
}
#subMenusContainer{
display:block;
position:absolute;
top:0;
left:0;
width:100%;
height:0;
overflow:visible;
z-index:1000000000
}

</style>

Blog de proves

dissabte, 11 de gener del 2014

Mètode montecarlo

dimecres, 16 d’octubre del 2013

Menús