MENÚ

menúinfantil

<table background="URL de la imagen" border="0" cellpadding="4">
<tbody><tr><td><div class="menudesplegable"><a class="main"><img src="http://png.findicons.com/files/icons/2118/nuvola/32/edu_languages.png" />comunicació i representació</a><div class="sub first">
<img src="" /><a href=""><p><span>______________________________</span>
</p></a><div class="sub even"><img src="https://docs.google.com/file/d/0B38uuJyR9qS6XzdrakltOGdsY1E/edit?usp=sharing" /><a href="http://educacioplasticaivisualesouno.blogspot.com.es/2013/07/los-elementos-basicos-del-lenguaje.html
"><p><span>...Contes</span>
</p></a><div class="sub odd"><img alt="" src="https://lh4.googleusercontent.com/-dqhB9i5zBiY/UY5doCXpKtI/AAAAAAAAA3w/3rwl_1UNN6Q/s72/Music2%20%283%29.png" /><a href="http://2icolavem.blogspot.com.es/2013/02/cancons.html"><p><span>...Cançons</span>
</p></a><div class="sub even"><img alt="" src="https://lh3.googleusercontent.com/-A0getwFZH50/UY5dnbqfQMI/AAAAAAAAA3o/IAo8EwKtacY/s72/Music2%20%281%29.png" /><a href="http://2icolavem.blogspot.com.es/2013/02/canciones.html"><p><span>...Canciones</span>
</p></a><div class="sub odd last"><img alt="" src="https://lh5.googleusercontent.com/-PJiHVs5tNDA/UY5dpDGCeKI/AAAAAAAAA38/NSqGGCeameA/s72/Music2.png" /><a href="http://2icolavem.blogspot.com.es/2013/02/cancons-angles.html"><p><span>...Songs</span>

<div class="sub even"><img src="https://lh6.googleusercontent.com/-Vk-bm6EAYfg/UY5dwSOqVWI/AAAAAAAAA6c/U7eLkVRcL_8/s72/music%20%281%29.png" /><a href="http://2icolavem.blogspot.com.es/2013/03/musica.html"><p><span>...Música</span>
</p></a><div class="sub odd"><img alt="" src="https://lh5.googleusercontent.com/-dM1c1zFFfCc/UY5drFDKCLI/AAAAAAAAA4o/NPW4G0X8mjQ/s72/Trumpet.png" /><a href="http://2icolavem.blogspot.com.es/2013/05/instrumentos-de-musica.html"><p><span>...Instruments</span>
</p></a><div class="sub even"><img alt="" src="https://lh5.googleusercontent.com/-JceuB-oqNWc/UY5dzu3USjI/AAAAAAAAA7k/W5w4_OERLx8/s72/sound.png" /><a href="http://2icolavem.blogspot.com.es/2013/02/sons.html"><p><span>...Sons</span>
</p></a><div class="sub odd last"><img alt="" src="https://lh6.googleusercontent.com/-R14VBbtdLCw/UY5iNqlpL6I/AAAAAAAAA84/Q0XS4ESwaoE/s72/aeiou.PNG" /><a href="http://2icolavem.blogspot.com.es/2013/05/les-vocals.html"><p><span>...Vocals</span>
<div class="sub even"><img src="https://lh3.googleusercontent.com/-mcTwvVSNSJ0/UY5dlCeoaDI/AAAAAAAAA2s/NHFoLc3vU0E/s72/Google%20Talk.png" /><a href="http://2icolavem.blogspot.com.es/2013/04/refranys.html"><p><span>...Dites populars</span>
</p></a><div class="sub odd"><img alt="" src="https://lh3.googleusercontent.com/--7mud_Mc8F0/UY5dyuhmS7I/AAAAAAAAA7A/sbI9W_Lyd0I/s72/purplestyle-02-talk.png" /><a href="http://2icolavem.blogspot.com.es/2013/05/endivinalles.html"><p><span>...Endivinalles</span>
</p></a><div class="sub even"><img alt="" src="https://lh3.googleusercontent.com/-ymXYXwH1_tg/UY5d1XIzWuI/AAAAAAAAA8E/jtWq-ZCCVIs/s72/uk.png" /><a href="http://2icolavem.blogspot.com.es/2013/05/english.html"><p><span>...English</span>
</p></a><div class="sub odd last"><img alt="" src="https://lh4.googleusercontent.com/-pv4cnMIC9JY/UY5dr8Y2kRI/AAAAAAAAA44/Sbh69zpdVqc/s72/bag.PNG" /><a href="http://2icolavem.blogspot.com.es/2013/05/de-tot-un-poc.html"><p><span>...De tot un poc</span>

</p></a></div></div></div></div></p></a></div></div>

<style type="text/css">

.menudesplegable {width:260px; height:22px; margin:2 auto 50px auto; position:relative; z-index:100;
-webkit-perspective:400px;
-moz-perspective:400px;
perspective:400px;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}

.menudesplegable div {position:absolute; padding:2px;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
transform-style:preserve-3d;
top:100%; left:0; width:255px;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;
}

.menudesplegable .odd {background:#ddd;
-moz-transform:rotateX(-180deg);
-webkit-transform:rotateX(-180deg);
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
.menudesplegable .even {background:#eee;
-moz-transform:rotateX(180deg);
-webkit-transform:rotateX(180deg);
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
.menudesplegable .first {background:#ddd;
-moz-transform:rotateX(-100deg);
-webkit-transform:rotateX(-100deg);
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
}
.menudesplegable .last {box-shadow:0 10px 10px -2px rgba(0,0,0,0.3); border-radius: 0 0 10px 10px;}
.menudesplegable:hover .sub {
-moz-transform:rotateX(0deg);
-webkit-transform:rotateX(0deg);
}

.menudesplegable .sub img {display:block;float:left; padding:0 2px 2px 0;}
.menudesplegable .sub p {font: normal 12px , sans-serif; color:#000 !important; padding:0; margin:0;}
.menudesplegable .sub p span {display:block; font: bold 15px century gothic, sans-serif; color:#ea0 !important;text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000, -1px 1px 2px #000000;}
.menudesplegable .sub p a {text-decoration:none;font: normal 8px/10px arial, sans-serif; color:#09c !important;}
.menudesplegable .sub p a:hover {text-decoration:none;}
.menudesplegable a.main {display:block; font: bold 16px century gothic, sans-serif;text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000, -1px 1px 2px #000000; text-align:center; text-decoration:none;cursor:pointer; color:#ffffff !important; border-radius:10px 10px 0 0; position:relative; z-index:100;border:20px solid #000000;
background-image: linear-gradient(bottom, rgb(96,138,7) 16%, rgb(0,0,0) 58%);
background-image: -o-linear-gradient(bottom, rgb(0,102,153) 16%, rgb(0,0,0) 58%);
background-image: -moz-linear-gradient(bottom, rgb(0,102,153) 16%, rgb(0,0,0) 58%);
background-image: -webkit-linear-gradient(bottom, rgb(0,102,153) 16%, rgb(0,0,0) 58%);
background-image: -ms-linear-gradient(bottom, rgb(0,102,153) 16%, rgb(0,0,0) 58%);

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.16, rgb(45,128,38)),
    color-stop(0.58, rgb(25,73,20))
);
}
.menudesplegable a.main:hover {opacity:0.7;}
</style></div></div></p></a></div></div></div></div></div></div></td>
<td><div class="menudesplegable"><a class="main"><img src="http://png-5.findicons.com/files/icons/363/fish_toys/32/redfish.png" />Coneixement de l'entorn</a>
<div class="sub first"><img src="" /><a href=""><p><span>______________________________</span>
</p></a><div class="sub even"><img src="https://lh5.googleusercontent.com/-xlTlNQRwpXA/UY7wxYZpCPI/AAAAAAAAA_A/h4Z2irZ5uD8/s128/Season_Autumn.png" /><a href="http://2icolavem.blogspot.com.es/2013/02/tardor.html"><p><span>...La tardor</span>
</p></a><div class="sub odd"><img src="https://lh3.googleusercontent.com/-V-WqnbskizA/UY7wyckfndI/AAAAAAAAA_I/sG2CX6a1LJc/s128/Season_Winter.png" /><a href="http://2icolavem.blogspot.com.es/2013/02/hivern.html"><p><span>...L'hivern</span>
</p></a><div class="sub even"><img src="https://lh5.googleusercontent.com/-y749UsVnRn0/UY7wxrNYLHI/AAAAAAAAA_E/Fw2ejHqcSmc/s128/Season_Spring.png" /><a href="http://2icolavem.blogspot.com.es/2013/02/primavera.html"><p><span>...La primavera</span>
</p></a><div class="sub odd"><img src="https://lh3.googleusercontent.com/-9mkX8F-2sLU/UY5dqcqzV1I/AAAAAAAAA4U/fhMLNvLAFKc/s72/Season_Summer.png" /><a href="http://2icolavem.blogspot.com.es/2013/02/estiu.html"><p><span>...L'estiu</span>
</p></a><div class="sub even"><img alt="" src="https://lh4.googleusercontent.com/-ez_U5PWCyUU/UY5dsWAIBPI/AAAAAAAAA5E/VAKdeaV68es/s72/bee.png" /><a href="http://2icolavem.blogspot.com.es/2013/02/animals.html"><p><span>...Els animals</span>
</p></a><div class="sub odd"><img alt="" src="https://lh3.googleusercontent.com/-qvTsS2gKhts/UY5dj30hHLI/AAAAAAAAA2I/LQ7wuMhb9GE/s72/G12_Flowerpot_Plant.png" /><a href="http://2icolavem.blogspot.com.es/2013/05/les-plantes.html"><p><span>...Les plantes</span>
</p></a><div class="sub even"><img alt="" src="https://lh6.googleusercontent.com/-hMbMGtpuZlc/UY5djIPnptI/AAAAAAAAA10/XLs_DwS0tRk/s72/DAF%20Tipper%20Container%20Truck.png" /><a href="http://2icolavem.blogspot.com.es/2013/03/mitjans-de-transport.html"><p><span>...Els transports</span>
<div class="sub odd"><img src="https://lh5.googleusercontent.com/-CQCCwsNGCOw/UY5diE6GBpI/AAAAAAAAA1s/Eqi6Z3JeNCE/s72/Courses.png" /><a href="http://2icolavem.blogspot.com.es/2013/02/el-collegi.html"><p><span>...El col•legi</span>
</p></a><div class="sub even"><img alt="" src="https://lh5.googleusercontent.com/-SDqXK_nGQKw/UY5dtUElXXI/AAAAAAAAA5Y/Xm2ZN7_YBGg/s72/christmas_tree_cookie.png" /><a href="http://2icolavem.blogspot.com.es/2013/02/el-nadal_24.html"><p><span>...El nadal</span>
<div class="sub odd"><img src="https://lh5.googleusercontent.com/-KZkL3BnjKcA/UY5dvs-4c1I/AAAAAAAAA6I/VE5J414EaXA/s72/house.png" /><a href="http://2icolavem.blogspot.com.es/2013/02/la-casa.html"><p><span>...La casa</span>
</p></a><div class="sub even"><img alt="" src="https://lh4.googleusercontent.com/-mBXLfqJJX9A/UY5diBhFogI/AAAAAAAAA14/RWzuUaQOmzo/s72/City.png" /><a href="http://2icolavem.blogspot.com.es/2013/03/carrer.html"><p><span>...El carrer</span>
</p></a><div class="sub odd"><img alt="" src="https://lh5.googleusercontent.com/-HGF4ffW3-js/UY5duXaNRVI/AAAAAAAAA54/uLUs5wAE-rk/s72/family.png" /><a href="http://2icolavem.blogspot.com.es/2013/02/la-familia.html"><p><span>...La familia</span>
</p></a><div class="sub even"><img alt="" src="https://lh6.googleusercontent.com/-RGt8hBUUK6M/UY5dzSy2D0I/AAAAAAAAA7c/CIXRZxy9xMc/s72/shapes.png" /><a href="http://2icolavem.blogspot.com.es/2013/02/formes.html"><p><span>...Formes</span>
</p></a><div class="sub odd"><img alt="" src="https://lh3.googleusercontent.com/-BlmsrM1Lx3o/UY5dywgRvII/AAAAAAAAA68/xzJhXtH2lvs/s72/rainbow.png" /><a href="http://2icolavem.blogspot.com.es/2013/02/colors.html"><p><span>...Colors</span>
</p></a><div class="sub even"><img alt="" src="https://lh4.googleusercontent.com/-Fp8zjDrXIn4/UY5d1BDhlGI/AAAAAAAAA78/03T8obbCocI/s72/tama%C3%B1o.PNG" /><a href="http://2icolavem.blogspot.com.es/2013/02/tamany.html"><p><span>...Tamanys</span>
</p></a><div class="sub odd"><img alt="" src="https://lh5.googleusercontent.com/-hCyxhsoqVi8/UY5ruDpy56I/AAAAAAAAA-A/jKLPHTMQOb4/s72/series.PNG" /><a href="http://2icolavem.blogspot.com.es/2013/05/series.html"><p><span>...Sèries</span>
</p></a><div class="sub even"><img alt="" src="https://lh3.googleusercontent.com/-37uAH-36o7w/UY5dxZFrTAI/AAAAAAAAA6s/tOmOIplPZI4/s72/nombres.PNG" /><a href="http://2icolavem.blogspot.com.es/2013/02/nombres.html"><p><span>...Nombres</span>
</p></a></div></div></div></div></div></div></div></div></p></a></div></div></p></a></div></div></div></div></div></div>


<style type="text/css">

.menudesplegable {width:260px; height:22px; margin:2 auto 50px auto; position:relative; z-index:100;
-webkit-perspective:400px;
-moz-perspective:400px;
perspective:400px;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}

.menudesplegable div {position:absolute; padding:2px;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
transform-style:preserve-3d;
top:100%; left:0; width:255px;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;
}

.menudesplegable .odd {background:#ddd;
-moz-transform:rotateX(-180deg);
-webkit-transform:rotateX(-180deg);
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
.menudesplegable .even {background:#eee;
-moz-transform:rotateX(180deg);
-webkit-transform:rotateX(180deg);
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
.menudesplegable .first {background:#ddd;
-moz-transform:rotateX(-100deg);
-webkit-transform:rotateX(-100deg);
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
}
.menudesplegable .last {box-shadow:0 10px 10px -2px rgba(0,0,0,0.3); border-radius: 0 0 10px 10px;}
.menudesplegable:hover .sub {
-moz-transform:rotateX(0deg);
-webkit-transform:rotateX(0deg);
}

.menudesplegable .sub img {display:block;float:left; padding:0 2px 2px 0;}
.menudesplegable .sub p {font: normal 12px , sans-serif; color:#000 !important; padding:0; margin:0;}
.menudesplegable .sub p span {display:block; font: bold 15px century gothic, sans-serif; color:#ea0 !important;text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000, -1px 1px 2px #000000;}
.menudesplegable .sub p a {text-decoration:none;font: normal 8px/10px arial, sans-serif; color:#09c !important;}
.menudesplegable .sub p a:hover {text-decoration:none;}
.menudesplegable a.main {display:block; font: bold 16px century gothic, sans-serif;text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000, -1px 1px 2px #000000; text-align:center; text-decoration:none;cursor:pointer; color:#ffffff !important; border-radius:10px 10px 0 0; position:relative; z-index:100;border:20px solid #000000;
background-image: linear-gradient(bottom, rgb(96,138,7) 16%, rgb(0,0,0) 58%);
background-image: -o-linear-gradient(bottom, rgb(0,102,153) 16%, rgb(0,0,0) 58%);
background-image: -moz-linear-gradient(bottom, rgb(0,102,153) 16%, rgb(0,0,0) 58%);
background-image: -webkit-linear-gradient(bottom, rgb(0,102,153) 16%, rgb(0,0,0) 58%);
background-image: -ms-linear-gradient(bottom, rgb(0,102,153) 16%, rgb(0,0,0) 58%);

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.16, rgb(45,128,38)),
    color-stop(0.58, rgb(25,73,20))
);
}
.menudesplegable a.main:hover {opacity:0.7;}
</style></div></div></div></td>
<td><div class="menudesplegable"><a class="main"><img src="http://png-5.findicons.com/files/icons/363/fish_toys/32/redfish.png" />Coneixement de l'entorn</a>
<div class="sub first"><img src="" /><a href=""><p><span>______________________________</span>
</p></a><div class="sub even"><img src="https://lh5.googleusercontent.com/-xlTlNQRwpXA/UY7wxYZpCPI/AAAAAAAAA_A/h4Z2irZ5uD8/s128/Season_Autumn.png" /><a href="http://2icolavem.blogspot.com.es/2013/02/tardor.html"><p><span>...La tardor</span>
</p></a><div class="sub odd"><img src="https://lh3.googleusercontent.com/-V-WqnbskizA/UY7wyckfndI/AAAAAAAAA_I/sG2CX6a1LJc/s128/Season_Winter.png" /><a href="http://2icolavem.blogspot.com.es/2013/02/hivern.html"><p><span>...L'hivern</span>
</p></a><div class="sub even"><img src="https://lh5.googleusercontent.com/-y749UsVnRn0/UY7wxrNYLHI/AAAAAAAAA_E/Fw2ejHqcSmc/s128/Season_Spring.png" /><a href="http://2icolavem.blogspot.com.es/2013/02/primavera.html"><p><span>...La primavera</span>
</p></a><div class="sub odd"><img src="https://lh3.googleusercontent.com/-9mkX8F-2sLU/UY5dqcqzV1I/AAAAAAAAA4U/fhMLNvLAFKc/s72/Season_Summer.png" /><a href="http://2icolavem.blogspot.com.es/2013/02/estiu.html"><p><span>...L'estiu</span>
</p></a><div class="sub even"><img alt="" src="https://lh4.googleusercontent.com/-ez_U5PWCyUU/UY5dsWAIBPI/AAAAAAAAA5E/VAKdeaV68es/s72/bee.png" /><a href="http://2icolavem.blogspot.com.es/2013/02/animals.html"><p><span>...Els animals</span>
</p></a><div class="sub odd"><img alt="" src="https://lh3.googleusercontent.com/-qvTsS2gKhts/UY5dj30hHLI/AAAAAAAAA2I/LQ7wuMhb9GE/s72/G12_Flowerpot_Plant.png" /><a href="http://2icolavem.blogspot.com.es/2013/05/les-plantes.html"><p><span>...Les plantes</span>
</p></a><div class="sub even"><img alt="" src="https://lh6.googleusercontent.com/-hMbMGtpuZlc/UY5djIPnptI/AAAAAAAAA10/XLs_DwS0tRk/s72/DAF%20Tipper%20Container%20Truck.png" /><a href="http://2icolavem.blogspot.com.es/2013/03/mitjans-de-transport.html"><p><span>...Els transports</span>
<div class="sub odd"><img src="https://lh5.googleusercontent.com/-CQCCwsNGCOw/UY5diE6GBpI/AAAAAAAAA1s/Eqi6Z3JeNCE/s72/Courses.png" /><a href="http://2icolavem.blogspot.com.es/2013/02/el-collegi.html"><p><span>...El col•legi</span>
</p></a><div class="sub even"><img alt="" src="https://lh5.googleusercontent.com/-SDqXK_nGQKw/UY5dtUElXXI/AAAAAAAAA5Y/Xm2ZN7_YBGg/s72/christmas_tree_cookie.png" /><a href="http://2icolavem.blogspot.com.es/2013/02/el-nadal_24.html"><p><span>...El nadal</span>
<div class="sub odd"><img src="https://lh5.googleusercontent.com/-KZkL3BnjKcA/UY5dvs-4c1I/AAAAAAAAA6I/VE5J414EaXA/s72/house.png" /><a href="http://2icolavem.blogspot.com.es/2013/02/la-casa.html"><p><span>...La casa</span>
</p></a><div class="sub even"><img alt="" src="https://lh4.googleusercontent.com/-mBXLfqJJX9A/UY5diBhFogI/AAAAAAAAA14/RWzuUaQOmzo/s72/City.png" /><a href="http://2icolavem.blogspot.com.es/2013/03/carrer.html"><p><span>...El carrer</span>
</p></a><div class="sub odd"><img alt="" src="https://lh5.googleusercontent.com/-HGF4ffW3-js/UY5duXaNRVI/AAAAAAAAA54/uLUs5wAE-rk/s72/family.png" /><a href="http://2icolavem.blogspot.com.es/2013/02/la-familia.html"><p><span>...La familia</span>
</p></a><div class="sub even"><img alt="" src="https://lh6.googleusercontent.com/-RGt8hBUUK6M/UY5dzSy2D0I/AAAAAAAAA7c/CIXRZxy9xMc/s72/shapes.png" /><a href="http://2icolavem.blogspot.com.es/2013/02/formes.html"><p><span>...Formes</span>
</p></a><div class="sub odd"><img alt="" src="https://lh3.googleusercontent.com/-BlmsrM1Lx3o/UY5dywgRvII/AAAAAAAAA68/xzJhXtH2lvs/s72/rainbow.png" /><a href="http://2icolavem.blogspot.com.es/2013/02/colors.html"><p><span>...Colors</span>
</p></a><div class="sub even"><img alt="" src="https://lh4.googleusercontent.com/-Fp8zjDrXIn4/UY5d1BDhlGI/AAAAAAAAA78/03T8obbCocI/s72/tama%C3%B1o.PNG" /><a href="http://2icolavem.blogspot.com.es/2013/02/tamany.html"><p><span>...Tamanys</span>
</p></a><div class="sub odd"><img alt="" src="https://lh5.googleusercontent.com/-hCyxhsoqVi8/UY5ruDpy56I/AAAAAAAAA-A/jKLPHTMQOb4/s72/series.PNG" /><a href="http://2icolavem.blogspot.com.es/2013/05/series.html"><p><span>...Sèries</span>
</p></a><div class="sub even"><img alt="" src="https://lh3.googleusercontent.com/-37uAH-36o7w/UY5dxZFrTAI/AAAAAAAAA6s/tOmOIplPZI4/s72/nombres.PNG" /><a href="http://2icolavem.blogspot.com.es/2013/02/nombres.html"><p><span>...Nombres</span>
</p></a></div></div></div></div></div></div></div></div></p></a></div></div></p></a></div></div></div></div></div></div>

<style type="text/css">

.menudesplegable {width:260px; height:22px; margin:20 auto 50px auto; position:relative; z-index:100;
-webkit-perspective:400px;
-moz-perspective:400px;
perspective:400px;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}

.menudesplegable div {position:absolute; padding:2px;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
transform-style:preserve-3d;
top:100%; left:0; width:255px;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;
}

.menudesplegable .odd {background:#ddd;
-moz-transform:rotateX(-180deg);
-webkit-transform:rotateX(-180deg);
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
.menudesplegable .even {background:#eee;
-moz-transform:rotateX(180deg);
-webkit-transform:rotateX(180deg);
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
.menudesplegable .first {background:#ddd;
-moz-transform:rotateX(-100deg);
-webkit-transform:rotateX(-100deg);
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
}
.menudesplegable .last {box-shadow:0 10px 10px -2px rgba(0,0,0,0.3); border-radius: 0 0 10px 10px;}
.menudesplegable:hover .sub {
-moz-transform:rotateX(0deg);
-webkit-transform:rotateX(0deg);
}

.menudesplegable .sub img {display:block;float:left; padding:0 2px 2px 0;}
.menudesplegable .sub p {font: normal 12px , sans-serif; color:#000 !important; padding:0; margin:0;}
.menudesplegable .sub p span {display:block; font: bold 15px century gothic, sans-serif; color:#ea0 !important;text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000, -1px 1px 2px #000000;}
.menudesplegable .sub p a {text-decoration:none;font: normal 8px/10px arial, sans-serif; color:#09c !important;}
.menudesplegable .sub p a:hover {text-decoration:none;}
.menudesplegable a.main {display:block; font: bold 16px century gothic, sans-serif;text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000, -1px 1px 2px #000000; text-align:center; text-decoration:none;cursor:pointer; color:#ffffff !important; border-radius:10px 10px 0 0; position:relative; z-index:100;border:2px solid #000000;
background-image: linear-gradient(bottom, rgb(96,138,7) 16%, rgb(0,0,0) 58%);
background-image: -o-linear-gradient(bottom, rgb(0,102,153) 16%, rgb(0,0,0) 58%);
background-image: -moz-linear-gradient(bottom, rgb(0,102,153) 16%, rgb(0,0,0) 58%);
background-image: -webkit-linear-gradient(bottom, rgb(0,102,153) 16%, rgb(0,0,0) 58%);
background-image: -ms-linear-gradient(bottom, rgb(0,102,153) 16%, rgb(0,0,0) 58%);

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.16, rgb(45,128,38)),
    color-stop(0.58, rgb(25,73,20))
);
}
.menudesplegable a.main:hover {opacity:0.7;}
</style></div></div></div></td>

<td><div class="menudesplegable"><a class="main"><img src="http://png-4.findicons.com/files/icons/1588/farm_fresh_web/32/eye.png" />Identitat i autonomia</a><div class="sub first"><img src="" /><p><span>_______________________________</span></p><div class="sub even"><img src="https://lh4.googleusercontent.com/-1--_vaW2aFc/UY5dyF5FRAI/AAAAAAAAA7E/jZt_SRPMHIA/s72/pencil.png" /><a href="http://2icolavem.blogspot.com.es/2013/05/grafomotricitat.html"><p><span>...Grafomotricitat</span>
</p></a><div class="sub odd"><img alt="" src="https://lh5.googleusercontent.com/-2oSraWDfIhk/UY5dqK3ysQI/AAAAAAAAA4Q/oAXqksgyIt8/s72/Run.png" /><a href="http://2icolavem.blogspot.com.es/2013/05/psicomotricitat.html"><p><span>...Psicomotricitat</span>
</p></a><div class="sub even"><img alt="" src="https://lh5.googleusercontent.com/-zKWq-CRQzro/UY5drG5aPPI/AAAAAAAAA4s/0B-ULPQkVM4/s72/arrow.PNG" /><a href="http://2icolavem.blogspot.com.es/2013/02/lateralitat.html"><p><span>...Lateralitat</span>
</p></a><div class="sub odd last"><img alt="" src="https://lh4.googleusercontent.com/-O-93koIdfCQ/UY5dviVzitI/AAAAAAAAA6Y/8Gc2hG2fmDI/s72/library%20games.png" /><a href="http://2icolavem.blogspot.com.es/2013/05/jocs.html"><p><span>...Jocs</span>
<div class="sub even"><img src="https://lh3.googleusercontent.com/-EhoLBb_OYJ4/UY5dx6FJlfI/AAAAAAAAA60/5syc3AQcmN8/s72/package_games_sports.png" /><a href="http://2icolavem.blogspot.com.es/2013/02/cos.html"><p><span>...El cos</span>
</p></a><div class="sub odd"><img alt="" src="https://lh6.googleusercontent.com/-KqxmvPyu0Mg/UY5duVji5eI/AAAAAAAAA5w/OrCPN3id6SE/s72/face-smile.png" /><a href="http://2icolavem.blogspot.com.es/2013/02/cara.html"><p><span>...La cara</span>
</p></a><div class="sub even"><img alt="" src="https://lh5.googleusercontent.com/-z0_GdQLmhwQ/UY77LGzSwDI/AAAAAAAABAo/7BKZE5U3ySw/h120/vestitroig.PNG" /><a href="http://2icolavem.blogspot.com.es/2013/02/vestits.html"><p><span>...Els vestits</span>
</p></a><div class="sub odd last"><img alt="" src="https://lh3.googleusercontent.com/-8GQtnkVjBGM/UY5dtoZa97I/AAAAAAAAA5k/JgCyyonxHtU/s72/cookies.png" /><a href="http://2icolavem.blogspot.com.es/2013/02/aliments.html"><p><span>...Els aliments</span>
<div class="sub even"><img src="https://lh4.googleusercontent.com/-0W28NlkR7h8/UY5dsW30uVI/AAAAAAAAA5I/Xy5qC4YQu0k/s72/batroom.PNG" /><a href="http://2icolavem.blogspot.com.es/2013/02/higiene.html"><p><span>...Els hàbits</span>
</p></a><div class="sub odd"><img alt="" src="https://lh4.googleusercontent.com/-s2kTTZG1cUw/UY5duS5YMlI/AAAAAAAAA5s/XTSMvuB_fzE/s72/ear.PNG" /><a href="http://2icolavem.blogspot.com.es/2013/02/els-sentits.html"><p><span>...Els sentits</span>

</p></a></div></div></p></a></div></div></div></div></p></a></div></div>


<style type="text/css">

.menudesplegable {width:260px; height:22px; margin:0 auto 50px auto; position:relative; z-index:100;
-webkit-perspective:400px;
-moz-perspective:400px;
perspective:400px;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}

.menudesplegable div {position:absolute; padding:2px;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
transform-style:preserve-3d;
top:100%; left:0; width:255px;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;
}

.menudesplegable .odd {background:#ddd;
-moz-transform:rotateX(-180deg);
-webkit-transform:rotateX(-180deg);
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
.menudesplegable .even {background:#eee;
-moz-transform:rotateX(180deg);
-webkit-transform:rotateX(180deg);
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
.menudesplegable .first {background:#ddd;
-moz-transform:rotateX(-100deg);
-webkit-transform:rotateX(-100deg);
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
}
.menudesplegable .last {box-shadow:0 10px 10px -2px rgba(0,0,0,0.3); border-radius: 0 0 10px 10px;}
.menudesplegable:hover .sub {
-moz-transform:rotateX(0deg);
-webkit-transform:rotateX(0deg);
}

.menudesplegable .sub img {display:block;float:left; padding:0 2px 2px 0;}
.menudesplegable .sub p {font: normal 12px , sans-serif; color:#000 !important; padding:0; margin:0;}
.menudesplegable .sub p span {display:block; font: bold 15px century gothic, sans-serif; color:#ea0 !important;text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000, -1px 1px 2px #000000;}
.menudesplegable .sub p a {text-decoration:none;font: normal 8px/10px arial, sans-serif; color:#09c !important;}
.menudesplegable .sub p a:hover {text-decoration:none;}
.menudesplegable a.main {display:block; font: bold 16px century gothic, sans-serif;text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000, -1px 1px 2px #000000; text-align:center; text-decoration:none;cursor:pointer; color:#ffffff !important; border-radius:10px 10px 0 0; position:relative; z-index:100;border:2px solid #000000;
background-image: linear-gradient(bottom, rgb(96,138,7) 16%, rgb(0,0,0) 58%);
background-image: -o-linear-gradient(bottom, rgb(0,102,153) 16%, rgb(0,0,0) 58%);
background-image: -moz-linear-gradient(bottom, rgb(0,102,153) 16%, rgb(0,0,0) 58%);
background-image: -webkit-linear-gradient(bottom, rgb(0,102,153) 16%, rgb(0,0,0) 58%);
background-image: -ms-linear-gradient(bottom, rgb(0,102,153) 16%, rgb(0,0,0) 58%);

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.16, rgb(45,128,38)),
    color-stop(0.58, rgb(25,73,20))
);
}
.menudesplegable a.main:hover {opacity:0.7;}
</style></div></div></div></div></td>
</tr></tbody></table>

No hay comentarios:

Publicar un comentario