Code:
<html>
<title>Serbian IT Education</title>
<head>
<meta name="author" content="Serbian-IT-Education" />
	<meta name="description" content="Free website template" />
		<meta name="keywords" content="Serbian IT Education,IT Education, Education, IT, Template" />
<style type="text/css">
body {
background-image: url('http://www.dodaj.rs/f/2o/JL/19S9KRFu/asdasd.png');
background-repeat:repeat;
}
#navigation {
    list-style:none;
    text-align:center;
 }
#navigation li {
height:25px;
width:100px;
border-top:1px solid #e4e3e3;
border-bottom:1px solid #e4e3e3;
border-left:3px solid #df5318;
border-right:3px solid #df5318;
background-color:#ffffff;
padding:4px;
display:inline-block; 
  -webkit-transition: height .5s ease;
       -moz-transition: height .5s ease;
            transition: height .5s ease;
}
#navigation li:hover {
height:35px;
-webkit-border-bottom-image: url('http://www.dodaj.rs/f/3r/nG/4QRemuzS/arrow.png');
}
#navigation a {
padding:2px;
    display:inline-block; 
    text-decoration:none;
    color:#000;
 }
</style>
<script type="text/javascript">
</script>
</head>
<body>
<ul id="navigation">
<li><a href="">Home</a></li>
<li><a href="">FAQ</a></li>
<li><a href="">Portfolio</a></li>
<li><a href="">Contact</a></li>
<li><a href="">About us</a></li>
</ul>
</body>
</html>
Ok, the thing I want to do is to add border image bottom after transition, something like arrow that point to the word (up).