Menu deplegable con css en wordpress

[lynxstyle]

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>

[lynxstyle]

Código CSS:

Código:

/* Copyright (C) YOOtheme GmbH, YOOtheme Proprietary Use License (http://www.yootheme.com/license) */

/*
 * top and footer menu
 */

 
#toolbar ul.menu,
#footer ul.menu {
	display: inline-block;
	margin: 0px;
	padding: 0px;
	list-style: none;
}

#footer ul.menu {
	display: block;
	line-height: 14px;
}

#toolbar .menu li,
#footer .menu li {
	display: inline-block;
	margin: 0px;
	padding: 0px;
}

#toolbar .menu li a,
#footer .menu li a {
	display: inline-block;
	padding: 0px 10px 0px 15px;
	background: url(../images/topmenu_item_bg.png) 0 50% no-repeat;
	overflow:hidden; 
	color: #ffffff;
}

#footer .menu li a {
	background: url(../images/footermenu_item_bg.png) 0 50% no-repeat;
	color: #c8c8c8;
}
#footer .menu li a:hover { color: #ffffff; }

#toolbar .menu a.first,
#footer .menu a.first {
	padding-left: 0px;
	background: none;
}

#toolbar .menu a.last,
#footer .menu a.last { padding-right: 0px; }

[lynxstyle]

Código:

/*
 * menu
 */

 
#menu ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
}

#menu li {
	position: relative;
	z-index: 5;  
	margin: 0px;
	padding: 0px;
}


.dropdown-3 ul li ul{
	display:none;}
.dropdown-3 ul li:hover ul{
	display:block;}


#menu a,
#menu span { display: block; }
#menu a { text-decoration: none; }

 
#menu span.icon {
	background-repeat: no-repeat;
	background-position: 0 50%;
}

 
#menu ul.menu { float: left; }

#menu li.level1 {
	height: 45px;
	float: left;
}

#menu a.level1,
#menu span.level1 {	float: left; }

#menu a.level1 span.bg,
#menu span.level1 span.bg {
	height: 30px;
	padding: 0px 15px 0px 15px;
	float: left;
	line-height: 30px;
	font-size: 14px;
	color: #515966;
	text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.6);
	text-transform: uppercase;
	
}

 
#menu li:hover .level1 span.bg,
#menu li.remain .level1 span.bg,
#menu li.active .level1 span.bg {
	color: #ffffff;
	text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.3), 0px 1px 5px rgba(0, 0, 0, 0.5);
	
}

 
#menu a.level1 span.title,
#menu span.level1 span.title {
	font-size: 14px;
	line-height: 21px;
	
}

 
#menu a.level1 span.subtitle,
#menu span.level1 span.subtitle {
	margin-top: -3px;
	font-size: 9px;
	font-weight: normal;
	line-height: 10px;
	text-transform: none;
	
}

 
#menu div.fancy {
	position: absolute;
	top: 1px;
	z-index: 4;
	overflow: hidden;
	
}

#menu div.fancy div.fancy-1 { background: url(../images/menu_fancy.png) 0 0 no-repeat; }

#menu div.fancy div.fancy-2 {
	padding: 0px 10px 0px 10px;
	background: url(../images/menu_fancy.png) 100% -35px no-repeat;
}

#menu div.fancy div.fancy-3 {
	height: 30px;
	background: url(../images/menu_fancy.png) 0 -70px repeat-x;
}

 
#menu .dropdown {
	position: absolute;
	top: 44px;
	left: -999em;  
	z-index: 100;
	
	 
}

#menu li:hover .dropdown,
#menu li.remain .dropdown { left: 0px; }

#menu .dropdown-t1 { background: url(../images/menu_dropdown_corners.png) 0 0 no-repeat; }

#menu .dropdown-t2 {
	padding: 0px 6px 0px 6px;
	background: url(../images/menu_dropdown_corners.png) 100% -11px no-repeat;
}

#menu .dropdown-t3 {
	height: 6px;
	background: url(../images/menu_dropdown_corners.png) 0 -22px repeat-x;
}

#menu .dropdown-1 { background: url(../images/menu_dropdown_edges.png) 0 0 repeat-y; }

#menu .dropdown-2 {
	padding: 0px 3px 0px 3px;
	background: url(../images/menu_dropdown_edges.png) 100% 0 repeat-y;
}

#menu .dropdown-3 {
	padding: 0px 0px 0px 0px;
	background: #D8DEE2;
	overflow: hidden;
}

#menu .dropdown-b1 { background: url(../images/menu_dropdown_corners.png) 0 -33px no-repeat; }

#menu .dropdown-b2 {
	padding: 0px 6px 0px 6px;
	background: url(../images/menu_dropdown_corners.png) 100% -44px no-repeat;
}

#menu .dropdown-b3 {
	height: 6px;
	background: url(../images/menu_dropdown_corners.png) 0 -55px repeat-x;
}

 
#menu ul.level2 { background: url(../images/menu_level2_line_v.png) 100% 0 repeat-y; }
#menu ul.last { background: none; }

#menu .hover-box1 { overflow: hidden;
 }




#menu a.level2 { background: #D8DEE2 url(../images/menu_level2_line_h.png) 0 0 repeat-x; }
#menu a.level2.first { background-image: none; }

#menu a.level2 span.bg,
#menu span.level2 span.bg {
	padding-left: 10px;
	line-height: 24px;
	color: #515966;
	text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.6);
	font-size: 14px;
}

#menu a.level2:hover span.bg { color: #141414; }

 
#menu li.level2.parent,
#menu a.level2.parent { background: none; }

#menu li.level2.parent { padding: 5px 10px 5px 10px; }

#menu .hover-box4 { overflow: hidden;}

#menu li.level2.parent .hover-box1 { background: #D8DEE2 url(../images/menu_level2_item.png) 100% 100% no-repeat; }
#menu li.level2.parent .hover-box2 { background: url(../images/menu_level2_item.png) 100% 0 no-repeat; }
#menu li.level2.parent .hover-box3 { background: url(../images/menu_level2_item.png) 0 100% no-repeat; }
#menu li.level2.parent .hover-box4 { background: url(../images/menu_level2_item.png) 0 0 no-repeat; }

#menu li.level2.parent .hover-box1:hover,
#menu li.level2.parent .hover-box1:hover .hover-box2,
#menu li.level2.parent .hover-box1:hover .hover-box3,
#menu li.level2.parent .hover-box1:hover .hover-box4 { background-image: url(../images/menu_level2_item_hover.png); }

#menu li.level2.parent.separator .hover-box1:hover,
#menu li.level2.parent.separator .hover-box1:hover .hover-box2,
#menu li.level2.parent.separator .hover-box1:hover .hover-box3,
#menu li.level2.parent.separator .hover-box1:hover .hover-box4 { background-image: url(../images/menu_level2_item.png);}

 
#menu li.level2 a.current span.bg { font-weight: bold; } 

 
#menu a.level2 span.subtitle,
#menu span.level2 span.subtitle {
	margin-top: -10px;
	font-size: 10px;
	font-weight: normal;
	text-transform: none;
}

 
#menu a.level2 span.icon,
#menu span.level2 span.icon {
	min-height: 45px;
	padding-left: 50px;
	line-height: 45px;
}
#menu a.level2 span.icon span.title,
#menu span.level2 span.icon span.title { line-height: 33px; }
#menu a.level2 span.icon span.subtitle,
#menu span.level2 span.icon span.subtitle { line-height: 12px; }

 
#menu .sub { padding: 5px 0px 0px 0px; }

#menu a.level3 { background: url(../images/menu_level3_item.png) 5px 7px no-repeat; }
#menu a.level3:hover { background-position: 5px -8px; }

#menu a.level3 span.bg,
#menu span.level3 span.bg {
	padding-left: 15px;
	line-height: 17px;
	font-size: 11px;
	color: #515966;
	text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.6);
}

#menu a.level3:hover span.bg { color: #141414; }

 
 
 
 

#menu .columns2 ul.level2,
#menu .columns3 ul.level2,
#menu .columns4 ul.level2 { float: left; }

#menu .columns2 ul.level2 {	width: 50%; }

#menu .columns3 ul.level2 { width: 34%; }
#menu .columns3 ul.first,
#menu .columns3 ul.last { width: 33%; }

#menu .columns4 ul.level2 { width: 25%; }

#menu .columns2 li.level2 .group-box1,
#menu .columns3 li.level2 .group-box1,
#menu .columns4 li.level2 .group-box1 { margin-right: 2px; }

#menu .columns2 ul.last li.level2 .group-box1,
#menu .columns3 ul.last li.level2 .group-box1,
#menu .columns4 ul.last li.level2 .group-box1 { margin-right: 0px; }

/*
 * sub menus
 */
 
 
div.mod-menu ul {
	margin: 0px;
	padding: 0px;
	overflow: hidden;
	list-style: none;
}

div.mod-menu ul.menu li {
	margin: 0px;
	padding: 0px;
}

div.mod-menu ul.menu a,
div.mod-menu ul.menu span { display: block; }
div.mod-menu ul.menu a { text-decoration: none; }

 
div.mod-menu ul.menu span.icon {
	background-repeat: no-repeat;
	background-position: 5px 50%;
	text-indent: 35px;
}

 
div.mod-menu ul.menu li.parent span.separator { cursor: pointer; }

 
div.mod-menu ul.menu span.subtitle { display: none; }


/*
 * sub menu: mod-sidebar
 */

div.mod-sidebar ul.menu span.bg {
	height: 30px;
	line-height: 30px;
	text-indent: 10px;
	color: #c8c8c8;
}

 
div.mod-sidebar ul.menu a.current span.bg { font-weight: bold; }

 
div.mod-sidebar ul.menu a:hover span.bg,
div.mod-sidebar ul.menu span:hover span.bg { color: #ffffff; }

 
div.mod-sidebar ul.menu li.level1 { margin-bottom: 5px;}
div.mod-sidebar ul.menu li.level1.last { margin-bottom: 0px;}

div.mod-sidebar ul.menu a.level1,
div.mod-sidebar ul.menu span.level1 { background: url(../images/submenu_level1.png) 0 0 no-repeat; }

div.mod-sidebar ul.menu a.level1:hover,
div.mod-sidebar ul.menu span.level1:hover { background-position: 0 -35px; }

div.mod-sidebar ul.menu li.parent a.level1 span.bg,
div.mod-sidebar ul.menu li.parent span.level1 span.bg { background: url(../images/submenu_level1_parent.png) 100% 0 no-repeat; }

div.mod-sidebar ul.menu li.parent a.level1:hover span.bg,
div.mod-sidebar ul.menu li.parent span.level1:hover span.bg { background-position: 100% -35px; }

div.mod-sidebar ul.menu li.parent a.level1.active span.bg,
div.mod-sidebar ul.menu li.parent span.level1.active span.bg { background-position: 100% -70px; }

div.mod-sidebar ul.menu li.parent a.level1.active:hover span.bg,
div.mod-sidebar ul.menu li.parent span.level1.active:hover span.bg { background-position: 100% -105px; }

div.mod-sidebar ul.menu li.parent a.level1.active,
div.mod-sidebar ul.menu li.parent span.level1.active  { margin-bottom: 5px; }

 
div.mod-sidebar ul.menu ul.level2 {}
div.mod-sidebar ul.menu li.level2 {}

div.mod-sidebar ul.menu li.level2 a { background: #2B2F32 url(../images/submenu_level2_line.png) 0 0 repeat-x; }
div.mod-sidebar ul.menu li.level2 a.level2.last { background: none; }

div.mod-sidebar ul.menu li.level2 span.bg {
	height: 25px;
	background: url(../images/submenu_level2_item.png) 5px 0 no-repeat;
	line-height: 25px;
	text-indent: 25px;
}

div.mod-sidebar ul.menu li.level2 a:hover span.bg { background-position: 5px -25px; }

 
div.mod-sidebar ul.menu a.level3 span.bg {
	background-position: 15px 0;
	text-indent: 35px;
}

div.mod-sidebar ul.menu li.level3 a:hover span.bg { background-position: 15px -25px; }

 
div.mod-sidebar ul.menu a.level4 span.bg {
	background-position: 25px 0;
	text-indent: 45px;
}

div.mod-sidebar ul.menu li.level4 a:hover span.bg { background-position: 25px -25px; }