Menu centrado verticalmente

[messer]

Lo que tengo al momento es algo como esto:

Código HTML:

<style type="text/css">
#divx {
    width:80%;
    height:50px;
    position:absolute;
    top:100px;
    right:0;
    background:#EFEFEF;
    display:block;
    padding:10px;
    }

#divx ul {
    margin:0; padding:0;
    }

#divx ul li {
    float:left;
    display:block;
    margin-right:20px;
    position:relative;
    width:110px;
    font-weight:bold;
    border-top:4px solid #666666;
    border-bottom:4px solid #666666;
    }
#divx    ul li a{display:block; clear:both; padding:4px; font-weight:normal;}

#divx ul li ul {
    margin:auto 0;
    display:block;
    position:absolute;
    border:1px solid #666666;
    }

#divx ul li ul li {
    clear:both;
    margin:0;
    border:none;
    }

#divx ul li ul li a{
    display:block;
    }
</style>
<div id="divx">
<ul>
 <li><a href="#">link 1</a><ul>
 <li><a href="#">opcion 1</a></li>
 <li><a href="#">opcion 2</a></li>
 <li><a href="#">opcion 3</a></li>
 <li><a href="#">opcion 4</a></li>
</ul></li>
<li><a href="#">link 2</a><ul>
 <li><a href="#">opcion 1</a></li>
 <li><a href="#">opcion 2</a></li>
 <li><a href="#">opcion 3</a></li>
 <li><a href="#">opcion 4</a></li>
</ul></li>
<li><a href="#">link 3</a><ul>
 <li><a href="#">opcion 1</a></li>
 <li><a href="#">opcion 2</a></li>
 <li><a href="#">opcion 3</a></li>
 <li><a href="#">opcion 4</a></li>
 </ul></li>
<li><a href="#">link 4</a><ul>
 <li><a href="#">opcion 1</a></li>
 <li><a href="#">opcion 2</a></li>
 <li><a href="#">opcion 3</a></li>
 <li><a href="#">opcion 4</a></li>
 </ul></li>
</ul>
</div> 

he probado varias opciones pero no consigo que me quede como en la imagen, centrados los sub-menues verticalmente respecto del link correspondiente..

ver la imagen

Saludos!