Simple Box Shadow Creating Code

Copy the html & css code and Paste it to your index and css file. Save it. When you move your cursor to web design company you will see a  Box Shadow hover effect. Now you can implement this code to your site.

HTML:

<ul>
        <li><a href=”#”>Web Design Company<span></span></a></li>
</ul>

CSS:

.nav {
width:200px;
height:60px;
border:1px solid #CCC;
list-style:none;
background-color:#F09;
}

ul.nav li {
margin-top: 10px;
}

ul.nav li a{
    text-decoration:none;
    }

ul.nav li a:hover{
-ms-filter: “progid:DXImageTransform.Microsoft.Shadow(Strength=20, Direction=135, Color=#333333)”;/*IE 8*/
-moz-box-shadow: 5px 5px 20px #333333;/*FF 3.5+*/
-webkit-box-shadow: 5px 5px 20px #333333;/*Saf3-4, Chrome, iOS 4.0.2-4.2, Android 2.3+*/
box-shadow: 5px 5px 20px #333333;/* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=20, Direction=135, Color=#333333); /*IE 5.5-7*/
}