CSS 控件适配器的菜单样式解释

CSS 控件适配器中，使用最复杂的应该是 TreeView 和 Menu 了，因为他们都可能具有多级递归结构。
在这个工具包自带的官方例子中，有一个 SimpleMenu.css 作为一个定义样式的范本来参考。我在此示例的基础上将它修改为了专门针对垂直排列的菜单的样式 (SimpleMenuVertical.css)。并且为了方便使用，我添加了一些注释，分享于此。
（这种复杂度的 CSS 不加注释对大多数人来说是很难理解的）

这个菜单的显示效果如下：

CSS 代码

.foo {} /**//* To satisfy W3C CSS Validator */

/**//* 
 * All comments created by Neil Chen
 * 2006-9-28
 */


/**//* 子菜单对象的定位 */
.SimpleEntertainmentMenu ul.AspNet-Menu ul
{
    width: 130px;
    left: 100px;
    top: 0;
}

/**//* 所有菜单条目 */
.SimpleEntertainmentMenu ul.AspNet-Menu li
{
    background: #eeeeee;
    width:100px;
    text-align:center;
}

/**//* 自身能点的菜单条目用 a 表示，不能点的显示为 span */
.SimpleEntertainmentMenu ul.AspNet-Menu li a,
.SimpleEntertainmentMenu ul.AspNet-Menu li span
{
    color: black;
    padding: 4px 2px 4px 8px;
    border:1px solid #cccccc;
    background: transparent url(arrowRight.gif) right center no-repeat;
}

/**//* 清除上一个样式对叶子节点的副作用（不应该显示展开箭头）*/
.SimpleEntertainmentMenu ul.AspNet-Menu li.AspNet-Menu-Leaf a,
.SimpleEntertainmentMenu ul.AspNet-Menu li.AspNet-Menu-Leaf span
{
    background-image: none;
}


/**//* 菜单条目 mouseover 时，以及显式选中高亮的条目的背景色 */
.SimpleEntertainmentMenu ul.AspNet-Menu li:hover, 
.SimpleEntertainmentMenu ul.AspNet-Menu li.AspNet-Menu-Hover
{
    background: Black;
}

/**//* 所有高亮条目的字体颜色 */
.SimpleEntertainmentMenu ul.AspNet-Menu li:hover a, 
.SimpleEntertainmentMenu ul.AspNet-Menu li:hover span, 
.SimpleEntertainmentMenu ul.AspNet-Menu li.AspNet-Menu-Hover a,
.SimpleEntertainmentMenu ul.AspNet-Menu li.AspNet-Menu-Hover span,
.SimpleEntertainmentMenu ul.AspNet-Menu li:hover li:hover a, 
.SimpleEntertainmentMenu ul.AspNet-Menu li:hover li:hover span, 
.SimpleEntertainmentMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,
.SimpleEntertainmentMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover span,
.SimpleEntertainmentMenu ul.AspNet-Menu li:hover li:hover ul a:hover, 
.SimpleEntertainmentMenu ul.AspNet-Menu li:hover li:hover ul span.Asp-Menu-Hover, 
.SimpleEntertainmentMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul a:hover,
.SimpleEntertainmentMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul span.Asp-Menu-Hover
{
    color: White;
}

/**//* 清除上一个样式对高亮项目的下级菜单条目的副作用（前面被父级一并设置了，而高亮效果实际只应该存在于父级菜单本身） */
.SimpleEntertainmentMenu ul.AspNet-Menu li:hover ul a, 
.SimpleEntertainmentMenu ul.AspNet-Menu li:hover ul span, 
.SimpleEntertainmentMenu ul.AspNet-Menu li.AspNet-Menu-Hover ul a,
.SimpleEntertainmentMenu ul.AspNet-Menu li.AspNet-Menu-Hover ul span,
.SimpleEntertainmentMenu ul.AspNet-Menu li:hover li:hover ul a, 
.SimpleEntertainmentMenu ul.AspNet-Menu li:hover li:hover ul span, 
.SimpleEntertainmentMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul a,
.SimpleEntertainmentMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul span
{
    color: Black;
}

/**//* 当前高亮项目的背景小箭头变化 */
.SimpleEntertainmentMenu ul.AspNet-Menu li a:hover,
.SimpleEntertainmentMenu ul.AspNet-Menu li span.Asp-Menu-Hover
{
    color: White;
    background: transparent url(activeArrowRight.gif) right center no-repeat;
}

/**//* 清除上一个样式对叶子节点的副作用（不应该显示箭头） */
.SimpleEntertainmentMenu ul.AspNet-Menu li.AspNet-Menu-Leaf a:hover
{
    background-image: none;
}

/**//* 当前选择项边框绿色 */
.SimpleEntertainmentMenu .AspNet-Menu-Selected
{
    border: solid 1px #00ff00 !important;
}

/**//* 当前选择项的父级项目边框为红色 */
.SimpleEntertainmentMenu .AspNet-Menu-ChildSelected
{
    border: solid 1px #ff0000 !important;
}

/**//* 选中项目的子项目边框为蓝色 */
.SimpleEntertainmentMenu .AspNet-Menu-ParentSelected
{
    border: solid 1px #0000ff !important;
}