csss-animad0 <form id="form1" runat="server"> <div> <a href="#" onclick =" Mensaje() "> Click para la bienvenida </a>

</div> </form>

Ul { list-style-type:none ; padding:0; margin:0; } Li { display:inline-block; padding:5px; border:1px outset #375f85; color:white; background-color: #375f85; width:100px; position :relative ; margin:-2px; cursor:pointer; } #menuHorizontal { text-align :center ; } .subMenu { position :absolute ; top :38px; left :1px; display :none ; box-shadow: 0px 0.5px 5px #000; border-radius :0px 0px 10px 10px; -moz-animation-duration : 0.8s; } .subMenu>li:hover { background-color: #c9d7e6; -moz-transform: scale(1.1); text-shadow: 2px 2px 2px #375f85; z-index: 2;

-moz-animation-name: botonsubMenu; } .subMenu li:last-child { border-radius :0px 0px 10px 10px; -moz-animation-duration :0.5s; } .subMenu>li { display:block ; } #menuHorizontal li:hover ul { display :block ; -moz-animation-name :subMenu; } @-moz-keyframes subMenu { 0% { opacity :0; left :-150px; } 50% { -moz-transform:skew(10deg); box-shadow :-10px 4px 8px 5px #000; } 100% { opacity :1; left :1px; } } #menuHorizontal > li { -moz-transition:all 0.6s ease ; } #menuHorizontal > li:first-child { background-color :#D0DBE6; padding-top :10px; box-shadow :0px 0px 4px #375f85; border-radius :10px 10px 0px 0px; border :1px outset #D0DBE6; color :#375f85;

text-shadow :1px 1px 1px #375f85; } #menuHorizontal > li:hover { background-color :#abc; padding-top :10px; box-shadow :0px 0px 4px #375f85; border-radius :10px 10px 0px 0px; border :1px outset #abc; color :#375f85; text-shadow :1px 1px 1px #375f85; } @-moz-keyframes botonsubMenu { 0% { text-shadow :200px 2px 20px #375f85; } 50% { -moz-transform: scale(1.3); border-radius:5px; } 100% { -moz-transform: scale(1.1); text-shadow:2px 2px 1px #375f85; } }