I used CSS transition for navigation, but problem is next:

When I hover the navigation all elements below navigation also going down. Like navigation push elements down while transition is done. Here is code:

Code:
<html>
<title>Source Code</title>
<head>
<meta name="author" content="Aleksandar Arsic" />
	<meta name="description" content="Projekti otvorenog koda, tutoriali" />
		<meta name="keywords" content="Source Code" />
<link REL="SHORTCUT ICON" HREF="http://png.findicons.com/files/icons/573/must_have/48/copy.png">
<style type="text/css">
body {
background-image: url('http://www.dodaj.rs/f/2o/JL/19S9KRFu/asdasd.png');
background-repeat:repeat;
}
#main {
margin-top:50px;
background-color:#ffffff;
border:1px solid #cac9c8;
width:900px;
height:1000px;
margin-left:auto;
margin-right:auto;
}
#navigation {
width:100%
    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 #4bd5e9;
border-right:3px solid #4bd5e9;
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;
}
#navigation a {
font-family:Nadia serif;
padding:2px;
    display:inline-block; 
    text-decoration:none;
    color:#000;
 }
img {
margin-top:50px;
border:1px solid #4bd5e9;
 }
</style>
<script type="text/javascript">

</script>
</head>
<body>
<div id="main">
<ul id="navigation">
<li><a href="">Home</a></li>
<li><a href="">FAQ</a></li>
<li><a href="">Projects</a></li>
<li><a href="">Tutorials</a></li>
<li><a href="">About us</a></li>
<li><a href="">Contact</a></li>
</ul>
<center><img src="http://www.dodaj.rs/f/2x/Nw/4hVHgVSu/test11111111111111.png"></img></center>
</div>
</body>
</html>