Hi there,

Please have a look at the attached screenshot of my menu, as you can see it is a multi level menu, what I want to do is to replace the arrow on the second level by another image (bullet.gif) and the arrow of the 3rd level (which is hidden now) by another image.

This is my current css code

div.moduletable ul,
div.moduletable_text ul,
div.moduletable_menu ul,
div.moduletable_hilite ul {
margin: 0;
padding: 0;
}

div.moduletable li,
div.moduletable_text li,
div.moduletable_menu li,
div.moduletable_hilite li {
background: url(../images/menu-arrow.gif) no-repeat 5px 8px;
margin: 0;
padding-left: 16px;
}

Thanks.

I'll do a brief menu. Next to the categories and links will be a class name for the li's.


+ category navCat
+ category navCat
- category navCat
+ link navLink
- link navLink
+ sublink navSublink
+ sublink navSublink
+ link navLink
+ category navCat


Then do your CSS.


.navCat {
margin:0;
padding:0;
}
.navCat .navLink {
padding-left:16px;
background: url(../images/menu-arrow.gif) no-repeat 5px 8px;
}
.navLink .navSublink {
padding-left:32px;
background: url(../images/bullet.gif) no-repeat 5px 8px;
}


Code not guaranteed. Just play with it some and you should get it working.