Display Subcategories in Topnavigation

Question

I am trying to display my top navigation like this:

 _________________
 | Main Category |
 |_______________|
        |
    (on hover)
        |     _________________________________________________
        |     |                                               |
        |-->  |  Category 1.1   Category 1.2    Category 1.3  | 
              |  _____________  _____________   _____________ | 
              |  Subcat. 1.1.1  Subcat. 1.2.1   Subcat. 1.3.1 |
              |  Subcat. 1.1.2  Subcat. 1.2.2   Subcat. 1.3.2 |
              |  Subcat. 1.1.3  Subcat. 1.2.3   Subcat. 1.3.3 |
              |_______________________________________________|

So my goal is to list the subcategories below the parent category, directly in the ul.level0 dropdown, instead of having them inside of another ul (ul.level1).

I know there are several extensions that would allow me to do this, but it seems they all offer too much functionality and therefore have a huge impact on store performance while I could probably achieve the same result with a simple template change adding no extra page load.

Answer 1

Magento 1.8.0.2 and above

You can change this directly in app/design/frontend/yourtheme/default/template/page/html/topmenu/renderer.html

For your reference, this is defined in page.xml:

<block type="page/html_topmenu" name="catalog.topnav" template="page/html/topmenu.phtml">
    <block type="page/html_topmenu_renderer" name="catalog.topnav.renderer" template="page/html/topmenu/renderer.phtml"/>
</block>

Then you can just these two lines:

if($childLevel <= 0)
  $html .= '<ul class="level'. $childLevel .'">';
...
if($childLevel <= 0)
  $html .= '</ul>';

For older versions of Magento

The HTML for the top navigation is located in: app/code/core/Mage/Page/Block/Html/Topmenu.php so you will need to rewrite this block in a custom module

 <config>
    ...
    <blocks>
        <page><rewrite><html_topmenu>Namespace_Module_Block_Html_Topmenu</html_topmenu></rewrite></page>
    </blocks>
    ...
 </config>

Then you just need to override the _getHtml function - you will notice when it populates the children dropdown, it adds <ul> tags. You can do the following:

 if($childLevel <= 0)
     $html[] = '<ul class="level' . $childLevel. '">';
 $html[] = $this->_getHtml($child, $childrenWrapClass);
 if($childLevel <= 0)
     $html[] = '</ul>';