Tema: Menu Css
Ver Mensaje Individual
  #4 (permalink)  
Antiguo 30/05/2012, 12:31
Avatar de Simon_Echecopar
Simon_Echecopar
 
Fecha de Ingreso: marzo-2012
Mensajes: 96
Antigüedad: 12 años, 1 mes
Puntos: 0
Respuesta: Menu Css

<code>
/* Root = Horizontal, Secondary = Vertical */
ul#menu
{
margin: 0;
border: 0 none;
padding: 0;
/* ahora esta en 737px width: 500px; For KHTML with 360px*/
width:815px;
list-style: none;
height: 20px;
border:1px solid #55E;/* Original #eee*/
padding-top:30px;
padding-right:5px;
padding-left:31px;
padding-bottom:1px;
}

ul#menu li
{
margin: 0;
border: 0 none;
padding: 0;
float: left; /*For Gecko*/
display: inline;
list-style: none;
position: relative;
height: 20px;
padding-right:1px;
padding-left:7px;
}
ul#menu li
{
padding-bottom:2px;
}
ul#menu li:hover
{
background:#FFF;/* Original #eee */
}
ul#menu ul
{
margin: 0;
border: 0 none;
padding: 0;
width: 60px;
list-style: none;
display: none;
position: absolute;
top: 25px;
left: 10px;
background: #EEE;/* Original #eee */
border: none;
opacity: 0.8;
-moz-opacity: 0.8;
filter:alpha(opacity=80);
}

ul#menu ul:after /*From IE 7 lack of compliance*/
{
clear: both;
display: block;
font: 1px/0px serif;
content: ".";
height: 0;
visibility: hidden;
}

ul#menu ul li
{
width: 40px;
float: left; /*For IE 7 lack of compliance*/
display: block !important;
display: inline; /*For IE*/
}

/* Root Menu */
ul#menu input
{
padding: 2px 7px 2px;
float: none !important; /*For Opera*/
float: left; /*For IE*/
display: block;
background:#0099FF;/*Verde: #99FF99 Azul: #00AAFF*/
color: #FFFFFF;/* original #9FCF21 */
text-decoration: none;
font-weight: bold;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
/*border-right:1px solid #818181;*/
text-decoration: none;
height: auto !important;
height: 1%; /*For IE*/

}

/* Root Menu Hover Persistence */
ul#menu input:hover,ul#menu li:hover input,ul#menu li.iehover input
{
color: #009900;/*Original #003300*/
}

/* 2nd Menu */
ul#menu li:hover li input a, ul#menu li.iehover li input a
{
float: none;
border:none;
}

/* 2nd Menu Hover Persistence */
ul#menu li:hover li a:hover input:hover, ul#menu li:hover li:hover input, ul#menu li.iehover li a:hover, ul#menu li.iehover li.iehover input
{
background:#55A;/* Original #ddd */
color: #003300;/* Original #003300 */
}

/* 3rd Menu */
ul#menu li:hover li:hover li input, ul#menu li.iehover li.iehover li input
{
background: #55A;/* Original #EEE */
color: #003300;/* Original #666 */
}

/* 3rd Menu Hover Persistence */
ul#menu li:hover li:hover li a:hover input:hover, ul#menu li:hover li:hover li:hover input, ul#menu li.iehover li.iehover li a:hover,ul#menu li.iehover li.iehover li.iehover input a
{
background:#55A;/* Original #ddd */
color: #003300; /* Original #FFF */
}
/* 4th Menu */
ul#menu li:hover li:hover li:hover li input, ul#menu li.iehover li.iehover li.iehover li input a
{
background:#55A;/* Original #ddd */
color: #003300; /* Original #ddd */
}

/* 4th Menu Hover */
ul#menu li:hover li:hover li:hover li input:hover, ul#menu li.iehover li.iehover li.iehover li a:hover
{
background: #55A;/* Original #CCC */
color: #003300; /* Original #FFF */
}

ul#menu ul ul, ul#menu ul ul ul
{
display: none;
position: absolute;
top: 0;
left: 160px;
}

/* Do Not Move - Must Come Before display:block for Gecko */
ul#menu li:hover ul ul, ul#menu li:hover ul ul ul, ul#menu li.iehover ul ul, ul#menu li.iehover ul ul ul
{
display: none;
}

ul#menu li:hover ul, ul#menu ul li:hover ul, ul#menu ul ul li:hover ul, ul#menu li.iehover ul, ul#menu ul li.iehover ul, ul#menu ul ul li.iehover ul
{
display: block;
}

ul#menu .selected
{
color: #003300;
}
</code>