CSS Green On Hover Menu bars for Blogger

The CSS Code For the Navigational Menu Starts Here:

#nav{
list-style-type:none;
margin:0;
padding:10px;
text-align:center;
font: bold 16px Georgia;
}
#nav li{
display:inline;
margin-right:25px;
}
#nav li a{
position:relative;
color:black;
padding-bottom:8px;
text-decoration:none;

}
#nav li a:hover{
border-bottom:5px solid #25bd0d;
border-top:5px solid #25bd0d;
border-radius:12px;

}
#nav li a:hover:after{
content:'';
width:10px;
height:20px;
position:absolute;
left:50%;
margin-left:-5px;
bottom: 0;
border-width:5px;
border-style:solid;
border-color: transparent transparent #25bd0d transparent;
}

The HTML Code for the Menu starts Here:

<ul id="nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">About IIHT</a>
                <li><a href="#">Training</a></li>
                <li><a href="#">Placement</a></li>
                <li><a href="#">Press</a></li>
                <li><a href="#">Contact Us</a></li>
                <li><a href="#">Gallery</a></li>
                </li>
                </ul>