Menu
For creating submenus, see the leftmenu for Sub menus
Print screen without additional CSS

Structure with Classes and ID's
div.moduletable_mainmenu h3 ul.menu li#item-001.current.active a (Joomla 1.6) li#item-002 a (Joomla 1.6) li.item-001 .current.active a (Joomla 1.7 / 2.5) li.item-002 a (Joomla 1.7 / 2.5) 001, 002 etc = ID number of the menu-item
In the example structure "_mainmenu" de module class suffix.
For Joomla 1.6 the specific menu list-item is an id (li#item-xxx).
For Joomla 1.7 and 2.5 this is a class (li.item-xxx).
CSS
/* ------------------------------------------------------------
mainmenu * moduleclass suffix = _mainmenu, Menu tag ID = nav
--------------------------------------------------------------- */
div.moduletable_mainmenu {
margin: 0 0 15px 0;
padding: 0 0 15px 0;
border-bottom: 1px #999 solid;
}
div.moduletable_mainmenu h3 {
display: block;
padding: 2px 5px 2px 5px;
background-color: #ff0000;
color: #fff;
}
div.moduletable_mainmenu ul {
list-style: none;
padding: 0;
}
div.moduletable_mainmenu ul li {
list-style: none;
padding: 0;
margin: 2px 0 0 0;
}
div.moduletable_mainmenu ul li a {
display: block;
background-color: #e5e5e5;
padding: 2px 5px 2px 5px;
text-decoration: none;
}
div.moduletable_mainmenu ul li a:hover,
div.moduletable_mainmenu ul li.active a {
display: block;
background-color: #ccc;
padding: 2px 5px 2px 5px;
text-decoration: none;
}
Print screen after applying CSS


