OK, you have a template so where you want the menu add {menu template="cssmenu.tpl"} then for your CSS attach a
copy of the CMSMS style sheet 'Navigation: CSSMenu - Vertical' then for style change these values to your taste, you will note the h on the end of some of the style calls this is from the IE6 or less JS that you will need to add to the of your template if you are not reworking one of the default ones...
If you use default templates or style sheets
always make copies of whatever you want to change be it a template or style sheet by going to Layout » Templates or Layout » Stylesheets and clicking the dbl. paper icon to the right, name it, submit, then attach it, CSS that is...
#primary-nav a {
the main sizing and color for the list links, if you want more colors or control of the children pages you can add #primary-nav li li a {your stle here} below this...
border: 1px solid #006699;
display: block;
margin: 0px;
padding: 5px 10px;
color: #006699;
text-decoration: none;
background: transparent;
min-height:1em; /* Fixes IE7 whitespace bug*/
}
#primary-nav li, #primary-nav li.menuparent {
the basic grey background color of the menu, if you want a diff. color for a top level parent page that is not active or has any active child under it take out the "#primary-nav li.menuparent" and give it it's own color/style, if you do make sure not to leave the , at the end of #primary-nav li ...
background-color: #ececec;
min-height:1em; /* Fixes IE7 bug*/
}
/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */
the style of the page you are on also if the page is a child of a top level page the top level page will have this color, like the page on the demo site the menu shows this color for Default Templates Explained and it's active child page CSSMenu left + 1 column
#primary-nav li.menuactive {
background-color: #C7C7C7;
}
/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */
the arrow for menu items that have children under them
#primary-nav li.menuparent,
#primary-nav li.menuparent:hover,
#primary-nav li.menuparenth {
background-image: url(images/cms/arrow.gif);
background-position: center right;
background-repeat: no-repeat;
}
/* Styling the apperance of menu items on hover */
anything in the menu that gets moused over
#primary-nav li:hover,
#primary-nav li.menuh,
#primary-nav li.menuparenth,
#primary-nav li.menuactiveh {
background-color: #E7AB0B;
}
Also if you want to make the second level menu a set size when it flies out add, mostly used for the horizontal menu...
#primary-nav li li {width: ###px} your size in pixals...
Does that help?...
