nav {border: 0px solid; position:relative; width: 100%; margin-left: auto; margin-right: auto; } .menu {font-family: "Yanone", "Trebuchet MS", sans-serif; font-size: 18px; line-height: 22px; /* 22 */ position:relative; z-index: 2; /* 1000 */ -webkit-transition: all 2.40s ease; -moz-transition: all 2.40s ease; -ms-transition: all 2.40s ease; -o-transition: all 2.40s ease; transition: all 2.40s ease; } ul.fullnav, ul.fullnav ul { border:0px solid darkblue; list-style: none; width: 100%; margin: 0; border: 0; font-size: 0; text-align: center; -webkit-transition: all 2.40s ease; -moz-transition: all 2.40s ease; -ms-transition: all 2.40s ease; -o-transition: all 2.40s ease; transition: all 2.40s ease; } ul.fullnav { border-top: 0px solid #485927; border-bottom: 4px solid white; /* 4 #a7d150*/ background-color: saddlebrown; /* brown */ -webkit-transition: all 2.40s ease; -moz-transition: all 2.40s ease; -ms-transition: all 2.40s ease; -o-transition: all 2.40s ease; transition: all 2.40s ease; } ul.fullnav li { display: inline-block; margin: 0 1rem; padding: 0; font-size: 20px; /* 20 */ line-height: 38px; /* 38px */ -webkit-transition: all .40s ease; -moz-transition: all .40s ease; -ms-transition: all .40s ease; -o-transition: all .40s ease; transition: all .40s ease; } ul.fullnav>li>a { display: block; padding: 0 7px; text-decoration: none; color: white; -webkit-transition: all .40s ease; -moz-transition: all .40s ease; -ms-transition: all .40s ease; -o-transition: all .40s ease; transition: all .40s ease; } ul.fullnav li ul { /* esta pila está por encima de idioma */ position: absolute; left: 0; width: 100%; height: 0; overflow: hidden; background-color: rgba(white,.8); /* rgba(darkgoldenrod,.8) #a7d150*/ line-height: 0; /* 0 */ z-index: 1; /* 3 */ -webkit-transition: all .40s ease; -moz-transition: all .40s ease; -ms-transition: all .40s ease; -o-transition: all .40s ease; transition: all .40s ease; } ul.fullnav ul a { color: saddlebrown; /* #485927 */ -webkit-transition: all 2.40s ease; -moz-transition: all 2.40s ease; -ms-transition: all 2.40s ease; -o-transition: all 2.40s ease; transition: all 2.40s ease; } ul.fullnav li:hover a { background-color: white; /* #a7d150 */ -webkit-transition: all .40s ease; -moz-transition: all .40s ease; -ms-transition: all .40s ease; -o-transition: all .40s ease; transition: all .40s ease; color: saddlebrown; } ul.fullnav li:hover ul { height: 2.43rem; /* 2.43rem; */ /* auto original */ -webkit-transition: all .40s ease; -moz-transition: all .40s ease; -ms-transition: all .40s ease; -o-transition: all .40s ease; transition: all .40s ease; } ul.fullnav li:hover ul li a { &:hover::after { opacity: 1; position: relative;bottom: .35rem; }; &:after { content:''; z-index: 6; display: block; height: 2px; width: 100%; background-color: goldenrod; /* $green12 */ opacity: 0; position: relative;bottom: 0; -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; } } ul.fullnav li:hover ul li a:hover { text-decoration: none; color: goldenrod; /* $green12 */ border-radius: 7px; // background-color: rgba(goldenrod, .2); /*url(img/alfa70.png)*/ } .idiomaen, .idiomaes {border:1px solid moccasin; position: absolute; right: 0rem; z-index: 1; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); >a img {position: relative; display: block;} } .idiomaen { top: 50%; right: 3px;} /* 50% 3px */ .idiomaes { top: 50%; right: 30px;} /* 50% 30px */ .sobre {position: absolute; top: 50%; left:.5rem; z-index: 2; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); >a img {display: block; border-radius: 2px;} } /* Otra opción buena y lista para usar .idioma { position: absolute; top:1px; right: 0rem;z-index: 1000; background-image: url(img/alfa50.png); background-repeat: repeat; border-radius: 3px; img {display: block; padding: 4px 4px 1px; } .idiomaen {position: relative; top:0rem;} .idiomaes {position: relative; top:-2px;} } */ .go-top { position: fixed; bottom: 5rem; right: 1rem; text-decoration: none; background-image: url(img/to_top03.png); background-repeat: no-repeat; /* color: white!important; ha de haber texto en html background-color: rgba(153, 51, 0, 0.6); /*rgba(153, 51, 0, 0.5);*/ font-size: 16px; padding: 1em; display: none; } .go-top:hover { /* color: #800000!important; ha de haber texto en html background-color: rgba(153, 102, 0, 0.4); */ background-image: url(img/to_top03.png); /* background-image: url(to_top02.png); no hay que cargar otra img */ opacity: 0.5; background-repeat: no-repeat; z-index: 99; /* 9 */ } /* vertical menu */ #verticalmenu {border:0px solid mediumvioletred; font-size: 0.8em; position: fixed; top:15rem; left:0rem; width:75%; z-index: 2} #verticalmenu ul { list-style-type: none; } #verticalmenu ul li a.primera { border-top: solid 0px #FFF;} #verticalmenu ul li a.nivel1, #verticalmenu ul li a.nivel1ie {border:0px solid; height: 57px;background: url(img/rojas02-01.png) no-repeat; } #verticalmenu ul li a {display: block;text-decoration: none;color: #fff; position: relative;text-align: center; } #verticalmenu ul li a:hover, #verticalmenu ul li:hover a.nivel1 { background-color: transparent; color: brown; position: relative;} #verticalmenu ul li a.nivel1 {display: block!important;display: none; width: 42px; position: relative; } #verticalmenu ul li ul {display: none;} #verticalmenu ul li a:hover ul, #verticalmenu ul li:hover ul { border:0px solid darkblue; display: block; position: absolute; top:56px;left:0;} #verticalmenu ul li ul li a {width: 4rem; background-color: crimson; color: white; font-weight: bold; border: 0px solid tan; border-top: none; padding: 5px 0px; } #verticalmenu ul li ul li:first-child a { border-radius: 7px 7px 0 0;} #verticalmenu ul li ul li:last-child a { border-radius: 0 0 7px 7px;} #verticalmenu ul li ul li a:hover {position: relative; background-color: #f6d7dd; color: crimson; font-weight: bold;} table.falsa {border-collapse:collapse;border:0px;float: left;position: relative;} /* box-shadow:0px 4px 3px rgba(0,0,0,.5); */ /* /* max-width:700px; Ojo con max-width:1000px */ /* /* width:100%; box-shadow:0px 3px 2px rgba(violet,.5); /* 0px 4px 3px y .5 */ /* opacity: .9; */