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