Buenas, tengo el siguiente código:
Código HTML:
<div id="tapLeft" style="background-color:pink;height:30px;width:10%;z-index:999;float:right;"></div>
<ul style="background-color:red;height: 30px;float:right;">
<li style="background-color:blue;dislay:block;float:left;width:200px;height: 100%;">aaa</li>
<li style="background-color:green;dislay:block;float:left;width:200px;height: 100%;">bbb</li>
</ul>
<div id="tapRight" style="background-color:orange;height:30px;z-index:999;position:relative;float:right;width:100%;right:400px;margin-right:10%;display:block;"></div>
Lo que intento hacer es que "tapRight" acabe de llenar el hueco que dejan los otros elementos para formar una barra, pero no consigo que se coloque justo en el sitio que quiero que ocupe, sino justo debajo.
Ya sé que no es la mejor manera de crear un menú, pero es la única manera de poder jugar un poco con los z-index de manera que si pongo un submenu dentro de los <li>, este pueda aparecer desplazándose por debajo de la barra, y al mismo tiempo mantener la estructura de:
<menú>
<opción 1>
<nombre 1>
</nombre 1>
<subopciones 1>
</subopciones 1>
</opción 1>
<opción 2>
...
</menú>