File: /home/asjudine/public_html/menudirectores/menu.css
/* Menú Horizontal */
/* Borde Caja */
#nav,#nav ul {
background-color: #000000;
list-style: none outside none;
margin: 0;
padding: 0;
}
#nav2,#nav ul {
background-color: #8899AA;
list-style: none outside none;
margin: 0;
padding: 0;
}
#nav3,#nav ul {
background-color: #13847A;
list-style: none outside none;
margin: 0;
padding: 0;
}
#nav4,#nav ul {
background-color: #8899AA;
list-style: none outside none;
margin: 0;
padding: 0;
}
#nav5,#nav ul {
background-color: #996;
list-style: none outside none;
margin: 0;
padding: 0;
}
/* */
#nav {
display: block;
padding: 5px;
position: relative;
width: 172px;
-moz-perspective: 200px;
-ms-perspective: 200px;
-webkit-perspective: 200px;
-o-perspective: 200px;
perspective: 200px;
}
#nav2 {
display: block;
padding: 5px;
position: relative;
width: 172px;
-moz-perspective: 200px;
-ms-perspective: 200px;
-webkit-perspective: 200px;
-o-perspective: 200px;
perspective: 200px;
}
#nav3 {
display: block;
padding: 5px;
position: relative;
width: 172px;
-moz-perspective: 200px;
-ms-perspective: 200px;
-webkit-perspective: 200px;
-o-perspective: 200px;
perspective: 200px;
}
#nav4 {
display: block;
padding: 5px;
position: relative;
width: 172px;
-moz-perspective: 200px;
-ms-perspective: 200px;
-webkit-perspective: 200px;
-o-perspective: 200px;
perspective: 200px;
}
#nav5 {
display: block;
padding: 5px;
position: relative;
width: 172px;
-moz-perspective: 200px;
-ms-perspective: 200px;
-webkit-perspective: 200px;
-o-perspective: 200px;
perspective: 200px;
}
/* */
#nav ul {
left: -9999px;
opacity: 0;
padding: 5px;
position: absolute;
top: -9999px;
-moz-transform: rotateY(70deg);
-ms-transform: rotateY(70deg);
-o-transform: rotateY(70deg);
-webkit-transform: rotateY(70deg);
transform: rotateY(70deg);
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-moz-transition: -moz-transform 0.3s linear, opacity 0.3s linear;
-ms-transition: -ms-transform 0.3s linear, opacity 0.3s linear;
-o-transition: -o-transform 0.3s linear, opacity 0.3s linear;
-webkit-transition: -webkit-transform 0.3s linear, opacity 0.3s linear;
transition: transform 0.3s linear, opacity 0.3s linear;
width: 172px;
}
#nav2 ul {
left: -9999px;
opacity:0;
overflow: hidden;
padding: 5px;
position: absolute;
top: -9999px;
-moz-transform: rotateY(70deg);
-ms-transform: rotateY(70deg);
-o-transform: rotateY(70deg);
-webkit-transform: rotateY(70deg);
transform: rotateY(70deg);
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-moz-transition: -moz-transform 0.3s linear, opacity 0.3s linear;
-ms-transition: -ms-transform 0.3s linear, opacity 0.3s linear;
-o-transition: -o-transform 0.3s linear, opacity 0.3s linear;
-webkit-transition: -webkit-transform 0.3s linear, opacity 0.3s linear;
transition: transform 0.3s linear, opacity 0.3s linear;
}
#nav3 ul {
left: -9999px;
opacity:0;
overflow: hidden;
padding: 5px;
position: absolute;
top: -9999px;
-moz-transform: rotateY(70deg);
-ms-transform: rotateY(70deg);
-o-transform: rotateY(70deg);
-webkit-transform: rotateY(70deg);
transform: rotateY(70deg);
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-moz-transition: -moz-transform 0.3s linear, opacity 0.3s linear;
-ms-transition: -ms-transform 0.3s linear, opacity 0.3s linear;
-o-transition: -o-transform 0.3s linear, opacity 0.3s linear;
-webkit-transition: -webkit-transform 0.3s linear, opacity 0.3s linear;
transition: transform 0.3s linear, opacity 0.3s linear;
}
#nav4 ul {
left: -9999px;
opacity:0;
overflow: hidden;
padding: 5px;
position: absolute;
top: -9999px;
-moz-transform: rotateY(70deg);
-ms-transform: rotateY(70deg);
-o-transform: rotateY(70deg);
-webkit-transform: rotateY(70deg);
transform: rotateY(70deg);
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-moz-transition: -moz-transform 0.3s linear, opacity 0.3s linear;
-ms-transition: -ms-transform 0.3s linear, opacity 0.3s linear;
-o-transition: -o-transform 0.3s linear, opacity 0.3s linear;
-webkit-transition: -webkit-transform 0.3s linear, opacity 0.3s linear;
transition: transform 0.3s linear, opacity 0.3s linear;
}
#nav5 ul {
left: -9999px;
opacity:0;
overflow: hidden;
padding: 5px;
position: absolute;
top: -9999px;
-moz-transform: rotateY(70deg);
-ms-transform: rotateY(70deg);
-o-transform: rotateY(70deg);
-webkit-transform: rotateY(70deg);
transform: rotateY(70deg);
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-moz-transition: -moz-transform 0.3s linear, opacity 0.3s linear;
-ms-transition: -ms-transform 0.3s linear, opacity 0.3s linear;
-o-transition: -o-transform 0.3s linear, opacity 0.3s linear;
-webkit-transition: -webkit-transform 0.3s linear, opacity 0.3s linear;
transition: transform 0.3s linear, opacity 0.3s linear;
}
/* */
#nav li {
background-color: #FFFFFF;
position: relative;
}
#nav2 li {
background-color: #FFFFFF;
position: relative;
}
#nav3 li {
background-color: #FFFFFF;
position: relative;
}
#nav4 li {
background-color: #FFFFFF;
position: relative;
}
#nav5 li {
background-color: #FFFFFF;
position: relative;
}
/* */
#nav > li {
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#nav2 > li {
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#nav3 > li {
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#nav4 > li {
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#nav5 > li {
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
/* Caja Externa */
#nav li a {
background-color: #13847A;
border-color: #DDDDDD #555555 #555555 #DDDDDD;
border-style: solid;
border-width: 1px;
color: #FFFFFF;
display: block;
font-size: 12px;
padding: 8px 10px 8px 5px;
text-decoration: none;
width:155px;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
}
#nav2 li a {
background-color: #CCC;
border-color: #DDDDDD #555555 #555555 #DDDDDD;
border-style: solid;
border-width: 1px;
color: #000000;
display: block;
font-size: 12px;
padding: 8px 10px 8px 5px;
text-decoration: none;
width:155px;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
font-weight: bold;
}
#nav3 li a {
background-color: #9CC;
border-color: #DDDDDD #555555 #555555 #DDDDDD;
border-style: solid;
border-width: 1px;
color: #000000;
display: block;
font-size: 12px;
padding: 8px 10px 8px 5px;
text-decoration: none;
width:155px;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
}
#nav4 li a {
background-color: #AABBCC;
border-color: #DDDDDD #555555 #555555 #DDDDDD;
border-style: solid;
border-width: 1px;
color: #000000;
display: block;
font-size: 12px;
padding: 8px 10px 8px 5px;
text-decoration: none;
width:155px;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
}
#nav5 li a {
background-color: #D4BFAA;
border-color: #DDDDDD #555555 #555555 #DDDDDD;
border-style: solid;
border-width: 1px;
color: #000000;
display: block;
font-size: 12px;
padding: 8px 10px 8px 5px;
text-decoration: none;
width:155px;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
}
/* Caja interna al pasar el mouse */
#nav li:hover > a {
background-color: #000000;
border-color: #000000;
color: #FFFFF;
}
#nav2 li:hover > a {
background-color: #AABBCC;
border-color: #8899AA;
color: #137B72;
}
#nav3 li:hover > a {
background-color: #13847A;
border-color: #13847A;
color: #FFFFFF;
}
#nav4 li:hover > a {
background-color: #8899AA;
border-color: #8899AA;
color: #000000;
}
#nav5 li:hover > a {
background-color: #996;
border-color: #996;
color: #000000;
}
/* Caja Subs */
#nav li ul.subs {
left: 174px;
opacity:1;
top: 0;
background-color: #000000; /* Color Borde Caja Subs */
-moz-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
#nav li:hover ul.subs {
left: 174px;
opacity:1;
top: 0;
background-color: #000000; /* Color Borde Caja Subs */
-moz-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
#nav li:hover ul.subs li ul.subs {
display:none;
cursor:pointer;
}
#nav li:hover ul li:hover ul.subs {
display:block;
cursor:pointer;
}
#nav2 li:hover ul.subs {
left: 174px;
opacity:1;
top: 0;
background-color: #8899AA; /* Color Borde Caja Subs */
-moz-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
#nav3 li:hover ul.subs {
left: 174px;
opacity:1;
top: 0;
background-color: #13847A; /* Color Borde Caja Subs */
-moz-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
#nav4 li:hover ul.subs {
left: 174px;
opacity:1;
top: 0;
background-color: #8899AA; /* Color Borde Caja Subs */
-moz-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
#nav5 li:hover ul.subs {
left: 174px;
opacity:1;
top: 0;
background-color: #996; /* Color Borde Caja Subs */
-moz-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
/* */
#nav ul li {
width: 100%;
}
#nav2 ul li {
width: 100%;
}
#nav3 ul li {
width: 100%;
}
#nav4 ul li {
width: 100%;
}
#nav5 ul li {
width: 100%;
}
/* colors */
.colorScheme {
list-style: none outside none;
overflow: hidden;
width: 120px;
}
.colorScheme a {
cursor: pointer;
float: left;
height: 30px;
margin: 0 5px 5px;
width: 30px;
}
.colorScheme .clr1 {
background-color: #13847A;
}
.colorScheme .clr2 {
background-color: #aa889e;
}
.colorScheme .clr3 {
background-color: #8f88aa;
}
.colorScheme .clr4 {
background-color: #88aaaa;
}
.colorScheme .clr5 {
background-color: #88aa8a;
}
.colorScheme .clr6 {
background-color: #aaa188;
}
#clr1:target ~ #nav, #clr1:target ~ #nav ul {
background-color: #13847A;
}
#clr2:target ~ #nav, #clr2:target ~ #nav ul {
background-color: #aa889e;
}
#clr3:target ~ #nav, #clr3:target ~ #nav ul {
background-color: #8f88aa;
}
#clr4:target ~ #nav, #clr4:target ~ #nav ul {
background-color: #88aaaa;
}
#clr5:target ~ #nav, #clr5:target ~ #nav ul {
background-color: #88aa8a;
}
#clr6:target ~ #nav, #clr6:target ~ #nav ul {
background-color: #aaa188;
}
#clr1:target ~ #nav li:hover > a {
background-color: #13847A;
border-color: #13847A;
}
#clr2:target ~ #nav li:hover > a {
background-color: #aa889e;
border-color: #aa889e;
}
#clr3:target ~ #nav li:hover > a {
background-color: #8f88aa;
border-color: #8f88aa;
}
#clr4:target ~ #nav li:hover > a {
background-color: #88aaaa;
border-color: #88aaaa;
}
#clr5:target ~ #nav li:hover > a {
background-color: #88aa8a;
border-color: #88aa8a;
}
#clr6:target ~ #nav li:hover > a {
background-color: #aaa188;
border-color: #aaa188;
}
/* Menú Vertical */
#menu1 > ul > li {list-style:inside none; padding:0; margin:0; float:left; display:block; position:relative;}
/* Caja Externa */
#menu1 > ul > li > a{ outline:none; display:block; position:relative; width:140px; height:18px; padding:8px 15px 10px 25px; font: 12px/100% Arial,sans-serif; text-align:center; text-decoration:none;}
/* */
#menu1 ul li.has-sub:hover > ul, #menu1 ul li.has-sub:hover > div{display:block;}
/* */
#menu1 ul li > ul, #menu1 ul li > div{ display:none; width:auto; position:absolute; top:35px; padding: 5px 5px 5px 5px; background:#808080; border-radius:0 0 2px 2px; z-index:999; }
/* */
#menu1 ul li > ul{width:172px;}
/* */
#menu1 ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;}
/* */
#menu1,#menu1 ul {
background-color: #808080;
list-style: none outside none;
margin: 0;
padding: 0;
}
/* */
#menu1 {
display: block;
padding: 5px;
position: relative;
width: 100%; /* Ancho Total Barra Superior Caja Externa */
height:37px; /* Borde Barra Superior Caja Externa */
border-radius:1px;
-moz-perspective: 200px;
-ms-perspective: 200px;
-webkit-perspective: 200px;
-o-perspective: 200px;
perspective: 200px;
}
/* */
#menu1 li {
background-color: #808080; /* Borde Caja */
position: relative;
}
/* */
#menu1 > li {
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
/* */
#menu1 li a {
background-color: #D4BFAA; /* Color Caja Externa */
border-color: #DDDDDD #555555 #555555 #DDDDDD;
border-style:solid;
border-width: 1px;
color: #000000;
display: block;
font-size: 12px;
padding: 8px 10px 8px 5px;
text-decoration: none;
width:155px; /* Ancho de Caja Interna */
height:auto; /* Alto de Caja Interna */
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
}
/* Caja interna al pasar el mouse */
#menu1 li:hover > a {
background-color: #808080;
border-color: #808080;
color: #000000;
}