How can i set the menu background image expand orientation on hover?

How can i set the menu background image expand orientation on hover?

I have this simple dropdown menu.This is my html.
<nav>
<div class="wrap-nav">
<div class="menu">
<ul id="navi">
<li class="first current"><a href="index.html">Acasã</a></li>
<li><a href="servicii.html">Servicii</a>
<ul>
<li><a href="servicii.html#traduceri">Traduceri</a>
<ul>
<li><a
href="servicii.html#traduceri-tehnice">Traduceri
tehnice</a></li>
<li><a
href="servicii.html#traduceri-juridice">Traduceri
juridice</a></li>
<li><a
href="servicii.html#traduceri-medicale">Traduceri
medicale</a></li>
<li><a
href="servicii.html#tradgen">Traduceri
generale</a></li>
</ul>
</li>
<li><a href="#">Interpretariat</a>
<ul>
<li><a
href="servicii2.html#interpretariat-consecutiv">Consecutiv</a></li>
<li><a
href="servicii2.html#interpretariat-simultan">Simultan</a></li>
<li><a
href="servicii2.html#chouchotage">Chouchotage/whispering</a></li>
</ul>
</li>
<li><a href="#">Formare lingvisticã</a>
<ul>
<li><a
href="servicii3.html#cursuri-limbi-straine">Cursuri
de limbi straine</a></li>
<li><a
href="servicii3.html#cursuri-distanta">Cursuri
la distan&#539;a</a></li>
<li><a
href="servicii3.html#cursuri-limba-romana">Cursuri
de limba românã</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="preturi.html">Pre&#539;uri</a></li>
<li><a href="despre-noi.html">Despre noi</a></li>
<li class="last"><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</nav>
This is my css:
nav {background: #fffdf1 url("../images/pattern.png"); height:160px;
margin:80px 15% 20px 15%; border-top:2px solid #784601; border-bottom:2px
solid #784601; border-left:2px solid #784601; border-right:2px solid
#784601;}
.menu {padding-top:20px;text-align:center;/* pentru centrarea meniului /}
.menu ul {list-style: none; margin-top:0px; padding: 0;
display:inline-block; overflow:hidden;/ pentru centrarea meniului */}
.menu ul li{position: relative;float: left; padding: 79px 30px 30px 30px;
background:#5a5a5c;} .menu ul li.first{border-left:none !important} .menu
ul li.last{border-right:none !important} .menu ul li:hover
{background:#000 url("../images/pattern.png"); height:40px;
border-right:#000000 1px solid; border-left:#000000 1px solid;} .menu ul
li a {font-size: 24px; line-height:14px;color:#5a5a5c;display:
block;padding: 6px 10px;margin-bottom: 5px; z-index:6; position: relative;
text-transform:uppercase; font-family: Impact,Charcoal,sans-serif;
font-weight: normal;} .menu ul li a:hover{color:#ffffff;} .menu ul
li:hover a {}
When i change the height of the background from 40px to any bigger value
(in .menu ul li:hover) the image expand to bottom and i want the image to
expand to top.Please give me an advice.Thank you.