Customising menu styles

There are times when you need to take complete control over the menu styling, below is an example of a framework which can be used for basic customisation of the menu style. For more detailed examples see the css included in the html when you choose different menu styles throug theme config.

* Menus */
div.dynarch-horiz-menu {
 background-color:transparent;
 border:0px none; 
}
div.dynarch-horiz-menu table tr td.hover { 
 background-color:#ea5086;
 color: #DD5555; 
}
div.dynarch-horiz-menu table tr td.active {
 background-color:#ea5086;
 color: #DD5555; 
}
div.dynarch-horiz-menu table tr td.hover table,
div.dynarch-horiz-menu table tr td.active table { 
}
div.dynarch-horiz-menu table tr td.separator div {
 border-right-color: #999999;
 border-left-color: #999999;
 margin-right: 3px; 
}

div.dynarch-popup-menu {
 background-color: #FFFFFF;
 padding: 0;
 color: #000000;
 border: 0px none #FFFFFF;
}
div.dynarch-popup-menu tr.item{
 color: #000000; 
}
div.dynarch-popup-menu tr.item.hover {
 background-color: #ea5086;
 color: #FFFFFF; 
}
div.dynarch-popup-menu tr.item.active {
 background-color: #ea5086;
 color: #FFFFFF; 
}
div.dynarch-popup-menu tr.separator td div {
 background: #000000; 
}

Page tree

Customising menu styles