Hola, estoy intentando hacer que el menu de una plantilla de wordpress sea deplegable por niveles, el problema que me esta dando es que la caja donde se engloban los enlaces no se extiende al desplegar el ultimo nivel. Dejo el css y el html del menu.
Código HTML:
Código:
<div id="menu">
<ul class="menu menu-dropdown">
<li class="level1 item1 first"><a href="http://localhost/andyor/?page_id=2" title="Acerca de" class="level1 item1 first"><span class="bg">Acerca de</span></a>
</li>
<li class="level1 item2 last parent"><a href="http://localhost/andyor/?page_id=4" title="nivel 1" class="level1 item2 last parent"><span class="bg">nivel 1</span></a>
<div class="dropdown columns1">
<div class="dropdown-t1">
<div class="dropdown-t2">
<div class="dropdown-t3"></div>
</div>
</div>
<div class="dropdown-1">
<div class="dropdown-2">
<div class="dropdown-3">
<ul class="col1 level2 first last">
<li class="level2 item1 first parent">
<div class="group-box1">
<div class="group-box2">
<div class="group-box3">
<div class="group-box4">
<div class="group-box5">
<div class="hover-box1">
<div class="hover-box2">
<div class="hover-box3">
<div class="hover-box4"><a href="http://localhost/andyor/?page_id=6" title="nivel 2" class="level2 item1 first parent"><span class="bg">nivel 2</span></a></div>
</div>
</div>
</div>
<div class="sub">
<ul class="children level3">
<li class="level3 item1 first"><a href="http://localhost/andyor/?page_id=8" title="nivel 3" class="level3 item1 first"><span class="bg">nivel 3</span></a></li>
<li class="level3 item2 last"><a href="http://localhost/andyor/?page_id=12" title="nivel 3.2" class="level3 item2 last"><span class="bg">nivel 3.2</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="level2 item2 last parent">
<div class="group-box1">
<div class="group-box2">
<div class="group-box3">
<div class="group-box4">
<div class="group-box5">
<div class="hover-box1">
<div class="hover-box2">
<div class="hover-box3">
<div class="hover-box4"><a href="http://localhost/andyor/?page_id=14" title="nivel 2.2" class="level2 item2 last parent"><span class="bg">nivel 2.2</span></a></div>
</div>
</div>
</div>
<div class="sub">
<ul class="children level3">
<li class="level3 item1 first"><a href="http://localhost/andyor/?page_id=16" title="nivel 3.3" class="level3 item1 first"><span class="bg">nivel 3.3</span></a></li>
<li class="level3 item2 last"><a href="http://localhost/andyor/?page_id=18" title="nivel 3.4" class="level3 item2 last"><span class="bg">nivel 3.4</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="dropdown-b1">
<div class="dropdown-b2">
<div class="dropdown-b3"></div>
</div>
</div>
</div>
</li>
</ul>
</div>