On Mouse Over image problems

[LAMF]

I am doing my first COOLjsMenuPRO and I have almost accomplished my mission. I guess this is an easy one but...
Here we go:
I want all top level items to be a roll over image and on the first one it works but then on the second even all sub menus get the same image....?
I only want rollover images on the top level but on the sublevel I only want regular text with my own defines style (css)... What is wrong with my syntax here?

First image line is highlighted in blue and the second one (where it fails) in red....

here is the menu file with styles and contents code.

var color = {"border":"#000000", "bgON":"#BFFF00","bgOVER":"green"};
var color2 = {"border":"#000000", "bgON":"#FFFFFF","bgOVER":"#FF6600"};
var css = {"ON":"clsCMOn", "OVER":"clsCMOver"};
var STYLE = {"border":1, "shadow":0, "color":color, "css":css};
var STYLE1 = {"border":1, "borders":[1,1,1,0], "shadow":0, "color":color, "css":css};
var STYLE2 = {"border":1, "borders":[1,0,1,0], "shadow":0, "color":color, "css":css};
var STYLE3 = {"border":1, "borders":[1,0,1,1], "shadow":0, "color":color, "css":css};

function copy(o) {
var r = {};
for (var i in o) r[i] = typeof(o[i]) == 'object' ? copy(o[i]) : o[i];
return r;
}

BLANK_IMAGE = 'images/b.gif';

var MENU_ITEMS = [
{"pos":[0,0], "itemoff":[0,69], "leveloff":[19,0], "style":STYLE, "size":[20,70]},
{code:"", url:"http://www.hymans.se", target:'blank', status:'Tillbaka till startsidan', image:'bilder/meny/hem.gif', oimage:'bilder/meny/hemo.gif', imgsize:[20,70]},
{code:"Tyra":"", url:"pages/start.htm", target:'blank', status:'Tillbaka till startsidan', image:'bilder/meny/start.gif', oimage:'bilder/meny/starto.gif', imgsize:[20,70],
sub:[
{"itemoff":[19,0]},
{code:"Size",
sub:[
{"leveloff":[0,69], "itemoff":[19,0]},
{code:"None", "format":{"size":[20,70], "style":STYLE1, status:'Tillbaka till startsidan'}},
{code:"Tiny", "format":{"size":[20,70], "style":STYLE2}},
{code:"Small", "format":{"size":[20,70], "style":STYLE2}},
{code:"Medium", "format":{"size":[20,70], "style":STYLE2}},
{code:"Large", "format":{"size":[20,70], "style":STYLE3}}
]
},
{code:"Color",
sub:[
{"leveloff":[0,69], "itemoff":[19,0]},
{code:"None", "format":{"size":[20,70], "style":STYLE1, status:'Tillbaka till Framtiden'}},
{code:"Tiny", "format":{"size":[20,70], "style":STYLE2}},
{code:"Small", "format":{"size":[20,70], "style":STYLE2}},
{code:"Medium", "format":{"size":[20,70], "style":STYLE2}},
{code:"Large", "format":{"size":[20,70], "style":STYLE3}}
]
}
]
},
{code:"Jobb",
sub:[
{"itemoff":[19,0]},
{code:"Size",
sub:[
{"leveloff":[0,69], "itemoff":[19,0]},
{code:"None", "format":{"size":[20,70], "style":STYLE1, status:'Kolla in detta va'}},
{code:"Tiny", "format":{"size":[20,70], "style":STYLE2}},
{code:"Small", "format":{"size":[20,70], "style":STYLE2}},
{code:"Medium", "format":{"size":[20,70], "style":STYLE2}},
{code:"Large", "format":{"size":[20,70], "style":STYLE3}}
]
},
{code:"Color",
sub:[
{"leveloff":[0,69], "itemoff":[19,0]},
{code:"None", "format":{"size":[20,70], "style":STYLE1, status:'Tillbaka till Framtiden'}},
{code:"Tiny", "format":{"size":[20,70], "style":STYLE2}},
{code:"Small", "format":{"size":[20,70], "style":STYLE2}},
{code:"Medium", "format":{"size":[20,70], "style":STYLE2}},
{code:"Large", "format":{"size":[20,70], "style":STYLE3}}
]
}
]
}
];

var m1 = new COOLjsMenuPRO("menu1", MENU_ITEMS);
m1.initTop();

Thanks in advance for any help!
LAMF

[AlexKunin]

[LAMF]

[LAMF]

I solved it, thanks Alex!

But now another little tricky one... If I want to position it centered....
It says the trick is to do like this:

{"pos":"relative",......}
And then use a table with center alignment... But this doesn't give any effect at all for me.

[AlexKunin]