Hello Eric,
The Kendo UI widgets share a lot of CSS classes and behave consistently in several ways. The following article provides some more information about this:
http://docs.kendoui.com/getting-started/web/appearance-styling
The base PanelBar HTML output is the following:
The
<li> items receive a
k-state-active class when expanded.
The <li>'s child element (which can be a
<span> or an
<a>) receives a
k-state-hover class when hovered.
The HTML output and CSS classes of the Menu is almost identical to the PanelBar. The notable differences are:
1. The
k-state-hovered class is applied to the item's
<li> element.
2. When the Menu highlights the current page, it uses a k-state-selected class for the corresponding <li> element.
Depending on the specific combination of default / active / hovered / selected text and background color styles, it is possible to observe same-color text and background. The order of the CSS rules also makes a difference in some cases.
When unexpected behavior occurs, it is advisable to inspect the problematic elements with Firebug or a similar tool and make the required fine tuning by overriding the offending CSS styles with ones of
higher specificity.
All the best,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework -
download Kendo UI now!