Menu centrado verticalmente

[messer]

Buenas tardes, saludos a todos.

Me gustaria que me ayuden un poco ya que he intentado de varias formas pero no consigo centrar verticalmente un elemento con respecto a otro.

A lo que me refiero es algo como en la imagen:



Estoy trabajando con listas, algo como esto:

Código HTML:

<ul>
<li>link 1<ul>
<li>opcion 1</li>
<li>opcion 2</li>
<li>opcion 3</li>
<li>opcion 4</li>
</ul></li>
<li>link 2<ul>
<li>opcion 1</li>
<li>opcion 2</li>
<li>opcion 3</li>
<li>opcion 4</li>
</ul></li>
<li>link 3<ul>
 <li>opcion 1</li>
 <li>opcion 2</li>
 <li>opcion 3</li>
 <li>opcion 4</li>
 </ul></li>
<li>link 4<ul>
 <li>opcion 1</li>
 <li>opcion 2</li>
 <li>opcion 3</li>
 <li>opcion 4</li>
 </ul></li>
</ul> 

He probado con margin, left, padding, position, etc.. y no lo he logrado. Se me ha nublado la mente; si alguien tiene una idea que me pueda ayudar por favor sabre agradecer.

Saludos a todos!!

[DragonX]

mira esto de nuestro amigo Mik menu desplegable 100% CSS

[jomaruro]

Hola:

Sin poner el código css, es díficil saber porqué no te funciona y... ¡el adivino está de vacaciones!

Saludos.

[luisrojas500]

Lo mismo digo hasta que no pongas el css no se sabe que proble ma tienes

[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!

[kseso?]

Hola Messer.
Revisa el enlace de la imagen.

[messer]

Funciona! al principio no se por que no se veia, pero lo veo..

de todos modos aqui lo dejo para que copien y peguen:
http://www26.brinkster.com/zachel/images/ejemplo.jpg

[kseso?]

Bueno Messer, tu código ni "patrás"
Pásate por www.araudi.net sección menús, el nº 1 posíblemente se ajuste a tus necesidades.

Sólo tendrías que añadir en el selector "#menu ul li a:hover ul, #menu ul li:hover ul" la propiedad 'bottom:X%;'. Y calcular el valor de X según el nº de opciones y la altura de cada una.
Si siempre serán las mismas el valor será único para todos, si van a variar, necesitarás asignar un identificador único (#, id) a cada opción para darle un valor a cada "ul li ul"

Quizás he sido muy genérico, pero hasta no ver si lo utilizas o ves factible...

Un saludo

[messer]

Muy bien gracias por el link, dejame revisar con calma y organizar mi codigo..

Saludos!