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

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 .AspNet-Menu-Vertical ul.AspNet-Menu
{
    height: 100%;
}

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

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

/* 第二级开始的菜单条目字体靠左排列 */
.SimpleEntertainmentMenu .AspNet-Menu-Vertical ul.AspNet-Menu li li
{
    text-align:left;
}

/* 第二级开始的菜单条目的宽度 */
.SimpleEntertainmentMenu .AspNet-Menu-Vertical ul.AspNet-Menu ul li
{
    width:130px;
}

/* 三级菜单的定位 */
.SimpleEntertainmentMenu .AspNet-Menu-Vertical ul.AspNet-Menu li ul li ul
{
    margin: 0 0 0 -15px;
}


/* 自身能点的菜单条目用 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;
}