problema con listas

[molinillo]

Buenas, tengo un problema con un menú con submenús de los submenús, es un poco enrevesado, pero el problema seguramente tiene solución sencilla si me consigo explicar, debe ser que no he organizado bien la lista html


El tema es el siguiente.

Tengo una botonerá(menú) horizontal q me muestra unos submenús en horizontal en css,

Código PHP:

  --------------------         --------------------
| opicon | opcion |           | opicon | opcion |
-------------------          --------------------
                                 => |subopcion|
                                     ----------
                                    |subopcion|
                                     ---------- 
   

hasta ahí todo bien, el problema q tengo es q recivo las categorias(subopciones) desde una bbdd y esta es modificable por el cliente, así pues puedo llegar a tener muchas subcategorias q a su vez peuden tener muchas subcategorias.

Por eso necesito cortar el menu, pues puede tener muchas categorias ,por ejemplo cada 8 categorias y luego las 8 siguientes categorias q salgan al lado , en otra columna,
algo así:

Código PHP:

  ----------------------------------------
| opicon | opcion  | opicon | opcion |
----------------------------------------
                             |subopcion| |subopcion|
                              ------------------------
                             |subopcion| |subopcion|
                              ------------------------
                             |subopcion|
                              -----------
                             |subopcion|
                              -----------
                             |subopcion|
                              -----------
                             |subopcion|
                              -----------
                             |subopcion|
                              -----------
                             |subopcion|
                              ----------- 
   

Así si hay 8 saldrian en una columna, si hay hasta 16 saldrian en 2, hasta 24 en 3 etc..

mediante php lo he conseguido hacer, pero estas subopciones tienen a su vez otros submenús.
En el caso de una sola columna no he tenido problemas, el problema viene cuando tengo mas de una columna, que pasa?en mi desconocimiento de las listas he cogido con phpy he creado filas de 1 , 2 , 3 ,4 o mas elementos dependiendo de la cantidad :
si hay mas de 8 sería 2 columnas, 2 elementos

<li>ele1 ele2</li>
<li>ele3 ele4</li>
<li>ele5 ele6</li>
<li>ele7 ele8</li>

y mediante divs he conseguido mantenerlos alineados, realmente no son 2 columnas, si no 4 filas.

para q nos entendamos he hecho algo así(quito la parte de php y js para q quede mas claro)

Código HTML:

 <li><a href="#">Anuncios</a>  //[COLOR="Red"]aqui un boton del  menu ppal[/COLOR]
			<ul ><span></span>
				<li><a  href="#">categoria</a>
                	                <ul>   //[COLOR="Red"]aqui mi problema, para colocar las subcategorias en lineas, pues no se hacerlo de otra forma, luego al aplicar el hover se lo aplica a las dos subcategorias[/COLOR]
                    	                        <li><div id="subCate"><img  src="flecha.png" /><a  href="#">subcategoria</a></div></li>
                        <li><div id="subCate"><img  src="flecha.png" /><a href="#">Themes</a></div></li>	
                                        </ul>
                                </li>
				<li><img class ="bot2" src="flecha.png" /><a class="aTexto" href="#">categoria2</a></li>
			</ul>
 	</li> 

Así pues, pienso que mi problema es que no he organizado bien la lista, como digo en rojo arriba, al tener varias opciones en un li , al aplicarle el siguiente hover se le aplica a todas las opcioens de ese li(como es lógico).
alguna sugerencia para poder hacerla por columnas como digo, o organizar la lista de otra forma para poder hacerlo?


gracias de antemano!!!!

[zerokilled]

pues la verdad que te has complicado mucho. la forma sencilla es con css3 gracias al modulo multi-column layout. el problema, aun no es estandar. lo menciono para que conozcas que dentro de un futuro sera estandar. aun asi, hay navegadores que ya tienen soporte el cual puedes experimentar o si te decantas por definitivamente utilizarlo, usa tu propio juicio.

al tema en si, te estas complicando mucho la estructura de listado. lo que puedes hacer es crear el listado pero un grupo por cada cantidad de opciones. de modo que te quedaria asi.

Código:

<ul> <!-- listado principal en horizontal [nivel 1] -->
<li>categoria</li>
<li><ul><!-- nivel 2 columna 1 -->
<li>opcion</li>
...
</ul><ul><!-- nivel 2 columna 2 -->
<li>opcion</li>
...
</ul></li>
...
</ul>

luego con css flotas los grupos (elementos UL nivel 2) hacia una orientacion (left|right) para que parezcan columnas.

[DragonX]

vos buscas esto: http://www.araudi.net/forosdelweb/menu_desplegable.html

acá tenes muchos más ejemplos! http://www.araudi.net/