Horizontal menu text styling

Tiki's "topbar" horizontal menu is often in a rectangular area with a particular height and styled background. What needs to be done for a CSS menu in Tiki to look good and work correctly in that location?

Vertical position of text in top level

The CSS menu stylesheets don't specify any height for the menu or height or top or bottom padding or margins for the menu items. The only related rule in cssmenus.css is that the links have a line-height of 1em, and the text inherits the default size it gets from the body rule. Any other menu styling needs to be done in the theme stylesheet.

Typically, the context of the horizontal menu is like

• div#tiki-top
  • nav (or div).role_navigation
    • ul.cssmenu_horiz
      • li.menuSection
        • a (link)
          • span.menutext (*)

(*) Thinking that this span doesn't enable anything that can't be done with the anchor, I don't know what it was added for, but I guess it was useful to someone, so it's here.

Typically in Tiki's themes, the vertical position of the menu link text relative to the rectangle that contains them is set with padding on the link:

So the rule would be something like

#tiki-top .cssmenu_horiz li a {
    font-size: 12px;
    padding: 16px 12px;
} 

Another method would be to not use padding but to specify the height of the a and give it a line-height of the same size.

#tiki-top .cssmenu_horiz li a {
    height: 32px;
    line-height: 32px;
}

Any style specified for the menu's top-level a will be inherited by the a items below it, but since the text in the dropdowns is often more tightly spaced than in the top level of the menu, it will probably be necessary to specify padding and/or line-height for these child as. These can be selected contextually, like

#tiki-top .cssmenu_horiz ul li a

with another "ul" added to the sequence for the dropdown list of menu items.

Other styling details

• if you want to adjust the popup box of options while hover a sewction level 0, you can adjust

.cssmenu_horiz ul {margin-top: 12px}