How do i implement hover hover link text to create a shadow?

Core tip: in the front, we talked about the underline of the link text, and now we consider how to implement the link text to create a shadow? When the mouse moved to the link text, the link text can change the color, and create a certain shadow and create a stereo effect, must be more eye-catching.

In the front, we talked about the underline of the link text, and now we consider how to implement the link text to create a shadow? When the mouse moved to the link text, the link text can change the color, and create a certain shadow and create a stereo effect, must be more eye-catching.

Effect as shown:

Link text Shadow effect CSS code:

ul,li{margin:0px; padding:0px list-style-type:none;} #nav {Font-family:verdana, "XXFarEastFont-Arial;") #nav li{float:left; in-left:30px;} #nav span{display:none; #nav a{font-size:12px; font-weight:800; color: #c00; text-decoration:none; display:block;} Nav a:hover{color: #999; top:1px; left:1px; position:relative;} #nav a:hover span{display:block; top:-1px; left:-2px; pos Ition:absolute; Color: #000; Cursor:pointer;}
Link text Shadow effect XHTML code:

<div id= "nav" ><br/><ul><br/><li><a href= "http://www.duote.com/" >52css Homepage<span>52css homepage</span></a></li><br/><li><a href= "http:// www.duote.com/">div+css Tutorials <span>div+css Tutorials </span></a></li><br/><li><a href= "http://www.duote.com/" >css layout instance <span>css layout instance </span></a></li><br/><li ><a href= "http://www.duote.com/" >css2.0 tutorials <span>css2.0 Tutorials </span></a></li><br/ ><li><a href= "http://www.duote.com/" >css online manual <span>css online manual </span></a></li ><br/><li><a href= "http://www.duote.com/" >web standard <span>web standard </span></a> </li><br/><li><a href= "http://www.duote.com/" >xhtml tutorials <span>xhtml Tutorials </span> </a></li><br/></ul><br/></div>