space between css menu hover - html

Question

here is my css menu code. i see empty space in menu when i move mouse over menu item. i tried to find some solutions. i think you can help, please heeeeelp
http://www.picz.ge/img/s3/1312/13/f/f85b3e9ef429.jpg here is a picture of it
HTML CODE
<div id="navcon">
<div id="nav">
<ul>
<li class="first">მთავარი</li>
<li> რეგისტრაცია</li>
<li>გალერეა</li>
<li>ჩვენ შესახებ</li>
<li>კონტაქტი</li>
</ul>
</div>
</div>
CSS CODE
#navcon {
background: #4a4a4a url(menu_assets/images/grad_dark.png) repeat-x left top;
background: -moz-linear-gradient(top, #cee7f7 0%, #10a5da 50%, #0577a8 51%, #3ebdea 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8a8a8a), color-stop(50%, #707070), color-stop(51%, #626262), color-stop(100%, #787878));
background: -webkit-linear-gradient(top, #cee7f7 0%, #10a5da 50%, #0577a8 51%, #3ebdea 100%);
background: -o-linear-gradient(top, #cee7f7 0%, #10a5da 50%, #0577a8 51%, #3ebdea 100%);
background: -ms-linear-gradient(top, #cee7f7 0%, #10a5da 50%, #0577a8 51%, #3ebdea 100%);
background: linear-gradient(to bottom, #cee7f7 0%, #10a5da 50%, #0577a8 51%, #3ebdea 100%);
width: 100%;
opacity: 0.6;
}
#nav {
width: 100%;
height: 56px;
position: relative;
color: white;
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif;
margin: 0px auto;
font-size: .9em;
text-align: center;
}
#nav ul {
list-style-type: none;
text-align:center;
list-style: none;
}
#nav > ul > li {
position: relative;
display: inline-block;
}
#nav ul li a {
border-right: 1px solid #5d5d5d;
padding: 20px;
display: inline-block;
text-align: center;
color: white;
text-decoration: none;
opacity: 1.6;
}
#nav > ul > li > a:hover {
background: #8a8a8a url(menu_assets/images/grad_dark.png) repeat-x left bottom;
background: -moz-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #646464), color-stop(50%, #4a4a4a), color-stop(51%, #3b3b3b), color-stop(100%, #525252));
background: -webkit-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
background: -o-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
background: -ms-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
background: linear-gradient(to bottom, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a', endColorstr='#787878', GradientType=0);
filter: none;
}
#nav ul li ul {
display: none;
}
#nav > ul > li:hover ul {
display: block;
position: absolute;
}
#nav > ul > li:first-child a{
border-left: 1px solid #5d5d5d;
}

Answer 1

http://jsfiddle.net/isherwood/DMR6k/3
#nav ul {
display: table;
margin: 0 auto;
padding-left: 0;
}
#nav ul li {
display: table-cell;
}