Después de varios días volviendome loco he encontrado una manera para que esto no ocurra, que ha sido poner las subcategorías en horizontal. Aquí os dejo lo que hice:
Subcategorias superfish en horizontal
1.- Incluimos el archivo “superfish-navbar.css” en la carpeta “css”.
2.- En “blocktopmenu.php” incluimos una nueva línea debajo de:
$this->context->controller->addCSS($this->_path.'css/superfish-modified.css');
Insertamos:
$this->context->controller->addCSS($this->_path.'css/superfish-navbar.css');
3.- En “blocktopmenu.tpl” añadimos “sf-navbar” con un espacio al lado de “sf-menu”, quedaría así:
<ul class="sf-menu sf-navbar clearfix">
4.- En “superfish-modified.js” añadimos “sf-navbar” al lado de “sf-menu”, quedaría así:
jQuery('ul.sf-menu sf-navbar').superfish();
Archivo “superfish-navbar.css”:(os dejo el vínculo de donde lo saqué y bajo el archivo entero)
(https://raw.github.com/joeldbirch/superfish/master/css/superfish-navbar.css )
/*** adding the class sf-navbar in addition to sf-menu creates an all-horizontal nav-bar menu ***/
.sf-navbar {
background: #BDD2FF;
position: relative;
margin-bottom: 5em;
}
/* provide background colour for submenu strip */
/* you should just set the menu's container bg colour rather than use pseudo-elements */
.sf-navbar:before {
content: '';
position: absolute;
left: 0;
z-index: -1;
background-color: #BDD2FF;
height: 200%;
width: 100%;
}
.sf-navbar ul {
box-shadow: none;
}
.sf-navbar li {
background: #AABDE6;
position: static;
}
.sf-navbar > li > a,
.sf-navbar > li > ul > li > a {
border: none;
}
.sf-navbar > li > ul {
min-width: 36em; /* set this to whatever suits your design */
}
.sf-navbar ul li {
background: #BDD2FF;
position: relative;
}
.sf-navbar ul ul {
left: 0;
top: 100%;
}
.sf-navbar ul ul li {
width: 100%;
}
.sf-navbar > li > ul > li {
float: left;
}
.sf-navbar li.current {
background: #BDD2FF;
}
.sf-navbar li:hover,
.sf-navbar li.sfHover,
.sf-navbar ul li.current {
background: #BDD2FF;
}
.sf-navbar ul li:hover,
.sf-navbar ul li.sfHover,
.sf-navbar ul ul li {
background: #D1DFFF;
}
.sf-navbar ul ul li:hover,
.sf-navbar ul ul li.sfHover,
.sf-navbar ul ul li.current {
background: #E6EEFF;
}
.sf-navbar ul li.current > a {
font-weight: bold;
}
/*** point all arrows down ***/
.sf-navbar ul a .sf-sub-indicator { background-position: 0 -100px; }
.sf-navbar ul li:hover > a .sf-sub-indicator,
.sf-navbar ul li.sfHover > a .sf-sub-indicator {
background-position: -10px -100px;
}