In this section of the tutorial you will actually create the new skin with customized subitems look at particular depth.

• Duplicate the 'thirdskin' folder in the 'componentus/menu/skins/' folder in your application root. Rename the duplicate with the same name as the desired skin, for ex. FourthSkin.
• Open the skin.css file from 'FourthSkin' folder, then find and replace 'thirdskin_' hits with 'fourthskin_'. Save your results.
• Save image as 'subItemBgHoverD1.png' into your 'fourthskin/images/' folder. download
• Save image as 'subItemBgHoverD2.png' into your 'fourthskin/images/' folder. download

Add following classes:

.fourthskin_submenu-depth1
                        td.fourthskin_subitemhover,
.fourthskin_submenu-depth1 td.fourthskin_subitemexpanded {
   color: White;
	background: #f3f3f3 url(images/subItemBgHoverD1.png) repeat-x;
}

.fourthskin_submenu-depth2 td.fourthskin_subitemhover,
.fourthskin_submenu-depth2 td.fourthskin_subitemexpanded {
   color: White;
	background: #f3f3f3 url(images/subItemBgHoverD2.png) repeat-x;
}