Treeview style
The style of the treeview can be changed in admin panel of the widget. Go to Appearance -> Widgets -> SF Category Menu Widget and choose between the 5 available styles.
CSS
Live demo example:
#catnavigation { margin-left:10px; } #catnavigation li a{ text-decoration:none; color: black; } #catnavigation li a:hover { color: #cccccc; background: white; } #catnavigation li .category_name { font-size: 1.0em; }
Black and red style with smaller font example:
#catnavigation { margin-left:10px; background: black; } #catnavigation li a{ text-decoration:none; color: red; } #catnavigation li a:hover { color: #cccccc; background: white; } #catnavigation li .category_name { font-size: 0.9em; }
Blue style with bigger font example:
#catnavigation { margin-left:10px; background: #d7def8; } #catnavigation ul { background: #d7def8; } #catnavigation li a{ text-decoration:none; color: #183887; } #catnavigation li a:hover { color: #fff; } #catnavigation li .category_name { font-size: 1.3em; }