by Nicola
| |
Example of Css Style for a 3 Level /3 Colours vertical DropMenu Like tattoocms.itFirst create six icons:
- button-li.gif
- button-li-here.gif
- button-lili.gif
- button-lili-here.gif
- button-lilili.gif
- button-lilili-here.gif
/*MENU left*/ #menu li { list-style: none; color: #C7FF42; background-image: url(imgs/button-li.gif); background-repeat: no-repeat; background-position: 0 -1px; padding-top: 2px; padding-right: 0px; padding-bottom: 2px; padding-left: 22px; } #menu li.here { font-size: 1em; background-image: url(imgs/button-li-here.gif); background-repeat: no-repeat; background-position: 0 -3px; padding-top: 2px; padding-right: 0px; padding-bottom: 2px; padding-left: 22px; } #menu li li { font-size: 1em; background-image: url(imgs/button-lili.gif); background-repeat: no-repeat; background-position: 0 -3px; padding-top: 2px; padding-right: 0px; padding-bottom: 2px; padding-left: 20px; } #menu li li.here { font-size: 1em; background-image: url(imgs/button-lili-here.gif); background-repeat: no-repeat; background-position: 0 -3px; padding-top: 2px; padding-right: 0px; padding-bottom: 2px; padding-left: 20px; } #menu li li li { font-size: 1em; background-image: url(imgs/button-lilili.gif); background-repeat: no-repeat; background-position: 0 -3px; padding-top: 2px; padding-right: 0px; padding-bottom: 2px; padding-left: 22px; } #menu li li li.here { font-size: 1em; background-image: url(imgs/button-lilili-here.gif); background-repeat: no-repeat; background-position: 0 -3px; padding-top: 2px; padding-right: 0px; padding-bottom: 2px; padding-left: 22px; } #menu ul { padding: 10px; margin: 5px; } #menu ul ul { display:none; padding: 5px 10px 10px 0; } #menu li.here ul { display:block; padding: 3px 0 2px 13px; font-size: 1em !important; background-repeat: no-repeat; background-position: 0 5px; } #menu ul ul ul { padding: 0 !important; margin: 0 0 -4px 0 !important; } #menu a { font-size: 1em; text-decoration: none; } #menu a:link { color: #C7FF42; font-weight: normal; } #menu a:visited { color: #C7FF42; } #menu a:hover { color: #FFFFFF; } /*END MENU left*/