Joomla: Modifying indentation of mainmenu sublevel

Problem

I want to modify the indentation of the sublevels of mod_mainmenu.

Solution

Apply this difference to modules/mod_mainmenu.php:

$> diff -u mod_mainmenu.php.orig mod_mainmenu.php
--- mod_mainmenu.php.orig       2007-09-21 20:44:58.000000000 +0200
+++ mod_mainmenu.php    2007-09-21 20:45:18.000000000 +0200
@@ -249,12 +249,12 @@
                $indents = array(
                        // block prefix / item prefix / item suffix / block suffix
                        array( '<table width="100%" border="0" cellpadding="0" cellspacing="0">', '<tr align="left"><td>' , '</td></tr>', '</table>' ),
-                       array( '', '<div style="padding-left: 4px">'. $img[1] , '</div>', '' ),
-                       array( '', '<div style="padding-left: 8px">'. $img[2] , '</div>', '' ),
-                       array( '', '<div style="padding-left: 12px">'. $img[3] , '</div>', '' ),
-                       array( '', '<div style="padding-left: 16px">'. $img[4] , '</div>', '' ),
-                       array( '', '<div style="padding-left: 20px">'. $img[5] , '</div>', '' ),
-                       array( '', '<div style="padding-left: 24px">'. $img[6] , '</div>', '' ),
+                       array( '', '<div class="sublevel1">'. $img[1] , '</div>', '' ),
+                       array( '', '<div class="sublevel2">'. $img[2] , '</div>', '' ),
+                       array( '', '<div class="sublevel3">'. $img[3] , '</div>', '' ),
+                       array( '', '<div class="sublevel4">'. $img[4] , '</div>', '' ),
+                       array( '', '<div class="sublevel5">'. $img[5] , '</div>', '' ),
+                       array( '', '<div class="sublevel6">'. $img[6] , '</div>', '' ),
                );

This allows you to change the layout of each sublevel-level via css:

div.sublevel1 a.sublevel {
    background-color: #ebf1fa;                                    
    border-bottom: 1px solid #dae7fa;                             
    display: block;                                               
    width:174px;                                                  
    margin-left: -8px;                                            
    text-decoration: none;                                        
    text-indent: 8px;                                             
    white-space: nowrap;                                          
}                                                                 
                                                                  
div.sublevel2 a.sublevel {                                        
    background-color: #f5f7fa;                                    
    border-bottom: 1px solid #dae7fa;                             
    display: block;                                               
    width:174px;                                                  
    margin-left: -8px;                                            
    text-decoration: none;                                        
    text-indent: 16px;                                            
    white-space: nowrap;                                          
}

For usage in live website, see http://www.vsknederland.nl.