Padding top element on hover in navigation bar - html

Question

I've tried to padding-top on hover element ul#top li a but it fails to excute the code, maybe the inline-block display is bothering the padding to display but I dont know any other display to help him be inline and able him padding-top.
Incase my target is not understandable, I'm trying to padd "a" tag on hover to the top (about 5px padding).
Here is my CSS Code:
ul#top{
list-style: none;
}
ul#top li{
display: inline-block;
padding-right: 30px;
}
ul#top li a{
color: white;
text-decoration: none;
font-family: "Comic Sans MS", cursive, sans-serif;
-webkit-transition: color 0.5s ease-out;
-moz-transition: color 0.5s ease-out;
-o-transition: color 0.5s ease-out;
transition: color 0.5s ease-out;
}
ul#top li a:hover{
padding-top: 10px;
color: green;
}
My HTML:
<div class="header">
<div class="menu">
<ul id="top">
<li>Home</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
</div>
How to enable padding-top in inline-block display? (The inline-block might not be the problem, but I think it is)

Answer 1

You can add bottom: 10px instead with position: relative. Also add padding-bottom for an issue on hover:
ul#top {
list-style: none;
}
ul#top li {
display: inline-block;
padding-right: 30px;
}
ul#top li a {
color: white;
text-decoration: none;
font-family:"Comic Sans MS", cursive, sans-serif;
-webkit-transition: color 0.5s ease-out;
-moz-transition: color 0.5s ease-out;
-o-transition: color 0.5s ease-out;
transition: color 0.5s ease-out;
}
ul#top li:hover a {
position: relative;
padding-bottom: 10px;/*Add padding bottom*/
color: green;
bottom: 10px;/*Add bottom 10px*/
}
body {
background: red;
}
<div class="header">
<div class="menu">
<ul id="top">
<li>Home
</li>
<li>test
</li>
<li>test
</li>
<li>test
</li>
<li>test
</li>
</ul>
</div>
</div>