пробел между css menu hover

Question

вот мой код кода css. Я вижу пустое пространство в меню, когда я нажимаю на элемент меню. Я попытался найти некоторые решения. я думаю, что вы можете помочь, пожалуйста heeeeelp

http://www.picz.ge/img/s3/1312/13/f/f85b3e9ef429.jpg вот фотография этого

HTML КОД

<div id="navcon"> 
     <div id="nav"> 
     <ul> 
      <li class="first"><a href="main.html" href="#">&#4315;&#4311;&#4304;&#4309;&#4304;&#4320;&#4312;</a></li> 
     <li><a href="registracia.html" href="#"> &#4320;&#4308;&#4306;&#4312;&#4321;&#4322;&#4320;&#4304;&#4330;&#4312;&#4304;</a></li> 
     <li><a href="galerea.html" href="#">&#4306;&#4304;&#4314;&#4308;&#4320;&#4308;&#4304;</a></li> 
     <li><a href="about.html" href="#">&#4329;&#4309;&#4308;&#4316; &#4328;&#4308;&#4321;&#4304;&#4334;&#4308;&#4305;</a></li> 
     <li><a href="kontaqti.html" href="#">&#4313;&#4317;&#4316;&#4322;&#4304;&#4325;&#4322;&#4312;</a></li> 
     </ul> 
     </div> 
     </div> 

CSS КОД

#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; 
}