<title>Menu de navegacion con efecto degradado
</title>
body { background:#fff url("thebackground.gif") no-repeat fixed center center; color:#000; margin:0; border:0; letter-spacing:1px; color:#666 }
.ae { font: 9px verdana; color: #c8d3e0; margin: 0; text-align: center }
.ea { font: 9px verdana; color: #7f98b7; margin: 0; filter: fliph flipv; text-align: center }
a.top { font:bold 10px ms sans serif; text-decoration:none; width:100px; text-align:center; height:14px; margin:0 ;padding:2 0; background-color:#000; letter-spacing:1px; color:#fff }
a.top:Enlace, a.top:visited { border:1px solid #000; filter:Alpha(opacity=60) }
a.top:hover, a.top:active { border:1px solid #fff; filter:Alpha(opacity=90) }
a.one { font:bold 10px ms sans serif; text-decoration:none; width:100%; text-align:center; height:14px; margin:0; padding:2 0; background-color:#600; letter-spacing:1px; color:#fff }
a.one:Enlace, a.one:visited { border:1px solid #600; filter:Alpha(opacity=60) }
a.one:hover, a.one:active { border:1px solid #fff; filter:Alpha(opacity=90) }
a.dos { font:bold 10px ms sans serif; text-decoration:none; width:100%; text-align:center; height:14px; margin:0; padding:2 0; background-color:#060; letter-spacing:1px; color:#fff }
a.dos:Enlace, a.dos:visited { border:1px solid #060; filter:Alpha(opacity=60) }
a.dos:hover, a.dos:active { border:1px solid #fff; filter:Alpha(opacity=90) }
a.tres { font:bold 10px ms sans serif; text-decoration:none; width:100%; text-align:center; height:14px; margin:0; padding:2 0; background-color:#006; letter-spacing:1px; color:#fff }
a.tres:Enlace, a.tres:visited { border:1px solid #006; filter:Alpha(opacity=60) }
a.tres:hover, a.tres:active { border:1px solid #fff; filter:Alpha(opacity=90) }
a.cuatro { font:bold 10px ms sans serif; text-decoration:none; width:100%; text-align:center; height:14px; margin:0; padding:2 0; background-color:#660; letter-spacing:1px; color:#fff }
a.cuatro:Enlace, a.cuatro:visited { border:1px solid #660; filter:Alpha(opacity=60) }
a.cuatro:hover, a.cuatro:active { border:1px solid #fff; filter:Alpha(opacity=90) }
a.cinco { font:bold 10px ms sans serif; text-decoration:none; width:100%; text-align:center; height:14px; margin:0; padding:2 0; background-color:#606; letter-spacing:1px; color:#fff }
a.cinco:Enlace, a.cinco:visited { border:1px solid #606; filter:Alpha(opacity=60) }
a.cinco:hover, a.cinco:active { border:1px solid #fff; filter:Alpha(opacity=90) }
.tabsha { border-width:0 1 1 0; border-style:solid; height:97px; width:100px }
.wech { visibility:hidden }
#men1 { top:30px; left:2%; z-index:6; width:100px; position:absolute; border:1px outset #fff }
#sha1 { top:30px; left:2%; z-index:1; height:120px; width:105px; position:absolute; border:none; filter:shadow(color=#666666, direction=135, strength=5) }
#men2 { top:30px; left:22%; z-index:7; width:100px; position:absolute; border:1px outset #ccc }
#sha2 { top:30px; left:22%; z-index:2; height:120px; width:105px; position:absolute; border:none; filter:shadow(color=#666666, direction=135, strength=5) }
#men3 { top:30px; left:42%; z-index:8; width:100px; position:absolute; border:1px outset #ccc }
#sha3 { top:30px; left:42%; z-index:3; height:120px; width:105px; position:absolute; border:none; filter:shadow(color=#666666, direction=135, strength=5) }
#men4 { top:30px; left:62%; z-index:9; width:100px; position:absolute; border:1px outset #ccc }
#sha4 { top:30px; left:62%; z-index:4; height:120px; width:105px; position:absolute; border:none;filter:shadow(color=#666666, direction=135, strength=5) }
#men5 { top:30px; left:82%; z-index:10; width:100px; position:absolute; border:1px outset #fff }
#sha5 { top:30px; left:82%; z-index:5; height:120px; width:105px; position:absolute; border:none; filter:shadow(color=#666666, direction=135, strength=5) }
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
if( top.parent.frames.length > 0)
top.parent.location.href=self.location.href;
function ejecuta(id,what)
{
document.getElementById(id).style.visibility = what;
}
function degrada_out(obj) {
obj.style.filter="blendTrans(duration=1)";
if ((obj.visibility != "hidden") && (obj.filters.blendTrans.status != 1)) {
obj.filters.blendTrans.Apply();
obj.style.visibility="hidden";
obj.filters.blendTrans.Play();
}
}
function degrada_in(obj) {
obj.style.filter="blendTrans(duration=1)";
if ((obj.visibility != "visible") && (obj.filters.blendTrans.status != 1)) {
obj.filters.blendTrans.Apply();
obj.style.visibility="visible";
obj.filters.blendTrans.Play();
}
}
function mata() {
degrada_out(men1); degrada_out(men2); degrada_out(men3); degrada_out(men4); degrada_out(men5); ejecuta('sha1','hidden'); ejecuta('sha2','hidden'); ejecuta('sha3','hidden'); ejecuta('sha4','hidden'); ejecuta('sha5','hidden')
}
<a class=top href="javascript:mata()" onmouseover="degrada_in(men1); degrada_out(men2); degrada_out(men3); degrada_out(men4); degrada_out(men5); ejecuta('sha1','visible'); ejecuta('sha2','hidden'); ejecuta('sha3','hidden'); ejecuta('sha4','hidden'); ejecuta('sha5','hidden')"
style="position:absolute; top:5px; left:2%">Principal 1
</a><br>
<a class=one href="http://www.Tutores.org">Tutores.org
</a><br>
<a class=one href="http://www.Tutores.org/">Enlace 02
</a><br>
<a class=one href="http://www.Tutores.org/">Enlace 03
</a><br>
<a class=one href="http://www.Tutores.org/">Enlace 04
</a><br>
<a class=one href="http://www.Tutores.org/">Enlace 05
</a></div>
<a class=top href="javascript:mata()" onmouseover="degrada_out(men1); degrada_in(men2); degrada_out(men3); degrada_out(men4); degrada_out(men5); ejecuta('sha1','hidden'); ejecuta('sha2','visible'); ejecuta('sha3','hidden'); ejecuta('sha4','hidden'); ejecuta('sha5','hidden')"
style="position:absolute; top:5px; left:22%">Principal 2
</a><br>
<a class=dos href="http://www.Tutores.org/">Enlace 06
</a><br>
<a class=dos href="http://www.Tutores.org">Enlace 07
</a><br>
<a class=dos href="http://www.Tutores.org/">Enlace 08
</a><br>
<a class=dos href="http://www.Tutores.org/">Enlace 09
</a><br>
<a class=dos href="http://www.Tutores.org/">Enlace 10
</a></div>
<a class=top href="javascript:mata()" onmouseover="degrada_out(men1); degrada_out(men2); degrada_in(men3); degrada_out(men4); degrada_out(men5); ejecuta('sha1','hidden'); ejecuta('sha2','hidden'); ejecuta('sha3','visible'); ejecuta('sha4','hidden'); ejecuta('sha5','hidden')"
style="position:absolute; top:5px; left:42%">Principal 3
</a><br>
<a class=tres href="http://www.Tutores.org/">Enlace 11
</a><br>
<a class=tres href="http://www.Tutores.org/">Enlace 12
</a><br>
<a class=tres href="http://www.Tutores.org">Enlace 13
</a><br>
<a class=tres href="http://www.Tutores.org/">Enlace 14
</a><br>
<a class=tres href="http://www.Tutores.org/">Enlace 15
</a></div>
<a class=top href="javascript:mata()" onmouseover="degrada_out(men1); degrada_out(men2); degrada_out(men3); degrada_in(men4); degrada_out(men5); ejecuta('sha1','hidden'); ejecuta('sha2','hidden'); ejecuta('sha3','hidden'); ejecuta('sha4','visible'); ejecuta('sha5','hidden')"
style="position:absolute; top:5px; left:62%">Principal 4
</a><br>
<a class=cuatro href="http://www.Tutores.org/">Enlace 16
</a><br>
<a class=cuatro href="http://www.Tutores.org/">Enlace 17
</a><br>
<a class=cuatro href="http://www.Tutores.org/">Enlace 18
</a><br>
<a class=cuatro href="http://www.Tutores.org">Enlace 19
</a><br>
<a class=cuatro href="http://www.Tutores.org/">Enlace 20
</a></div>
<a class=top href="javascript:mata()" onmouseover="degrada_out(men1); degrada_out(men2); degrada_out(men3); degrada_out(men4); degrada_in(men5); ejecuta('sha1','hidden'); ejecuta('sha2','hidden'); ejecuta('sha3','hidden'); ejecuta('sha4','hidden'); ejecuta('sha5','visible')"
style="position:absolute; top:5px; left:82%">Principal 5
</a><br>
<a class=cinco href="http://www.Tutores.org/">Enlace 21
</a><br>
<a class=cinco href="http://www.Tutores.org/">Enlace 22
</a><br>
<a class=cinco href="http://www.Tutores.org/">Enlace 23
</a><br>
<a class=cinco href="http://www.Tutores.org/">Enlace 24
</a><br>
<a class=cinco href="http://www.Tutores.org/">Enlace 25
</a></div>
<div style="top:127px; left:0px; right:0px; bottom:0px; z-index:-1; width:100%; height:600px;position:absolute; border:0" onmouseover="mata()"></div>
<div style="top:40px; left:140px; z-index:-2; width:40%; position:absolute; text-align:justify">Contenido
<span style="position:absolute; height:220px; top:0px; right:0px; writing-mode:tb-rl" class="ea" onmouseover="this.className='ae'" onmouseout="this.className='ea'"><small><small>Tutopres.org
</small></small></span>