Przykładowy plik myblueaccordion.css, który pokazuje niebieskie dwupoziomowe menu wysuwane dla Grails. Przydatne dla kontrolki Accordion w pluginie Richui. Zerknij na pełny opis przystosowania kontrolki accordion do własnych potrzeb.

dl.accordion-menu {
margin: 0;
padding: 0;
width: 15em;
background:rgb(240,250,250);
}

dl.accordion-menu dt.a-m-t {
margin: 0;
background: #62A2DF;
padding: 0.3em 1em;
color:white;
border:solid 1px rgb(11,50,141);
border-left-color:rgb(170,225,255);
border-top-color:rgb(170,225,255);
}

dl.accordion-menu dt.a-m-t-hover{
background:#6CB3F6;
}


dl.accordion-menu dt.a-m-t-down{
border:solid 1px rgb(11,50,141);
border-right-color:rgb(170,225,255);
border-bottom-color:rgb(170,225,255);
}

html.accordion-menu-js dt.a-m-t{
cursor:pointer;
zoom:1;
}

dl.accordion-menu dd.a-m-d {
margin: 0;
padding: 0;
padding:0;
}

html.accordion-menu-js dd.a-m-d{
display:none;
}


html.accordion-menu-js dd.a-m-d-expand {
display:block;
}

html.accordion-menu-js dd.a-m-d-before-expand {
display:block;
position:relative;
z-index:-1;
opacity:0;
height:auto !important;
visibility:hidden;
overflow:visible;
}


html.accordion-menu-js dt.a-m-t-expand {
border-left-color:#222222;
color:black;
font-weight:bold;
background:#6CB3F6;
}

html.accordion-menu-js dd.a-m-d-anim {
overflow:hidden;
display:block;
}

dl.accordion-menu dd.a-m-d .bd{
padding:0.5em;
border: solid 1px rgb(11,50,141);
}