body元素）”处指明哪个菜单项被选中了（颇有些类似皇帝翻牌选择当晚“临幸”的妃子^_^）。
我们拿上篇文章中使用”绝对定位”的那个菜单为例，假设“软件”项被选中：
<body class="chlSoftware">
<menu>
<li id="miMovie"><a href="/movie/" title="DVDRip">电影</a></li>
<li id="miMusic"><a href="/music/" title="mp3">音乐</a></li>
<li id="miSoftware"><a href="/dl/" title="共享">软件</a></li>
</menu>
</body> body元素的class设置了当前页面所处的频道（栏目），也就是此处chl前缀的意思——Channel。根据这个class就可以设置“临幸”的规矩了……-_-|||
body.chlMovie li#miMovie a,
body.chlMusic li#Music a,
body.chlSoftware li#miSoftware a{
background-color:#E8F3FF;
border:1px solid #05F;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional
//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title>例10</title>
<style type="text/css">
menu{
position:relatvie;
width:360px;
height:20px;
margin:0;
padding:0;
}
menu li{
position:absolute;
top:0;
list-style-type:none;
width:120px;
height:20px;
line-height:20px;
text-align:center;
}
#miMovie{
left:0;
}
#miMusic{
left:120px;
}
#miSoftware{
left:240px;
}
menu a{
/*定义a为块级元素，方便用盒模型属性定义外观*/
display:block;
/*定义尺寸*/
height:20px;
/*盒模型风格*/
background-color:#F6F6F6;
border:1px solid #DDD;
/*文字样式*/
font:12px arial;
text-decoration:none;
/*垂直居中*/
line-height:20px;
/*水平居中*/
text-align:center;
}
menu a:link,menu a:visited{
color:#333;
}
menu a:hover,menu a:active{
background-color:#FFEFE6;
border:1px solid #F60;
}
body.chlMovie li#miMovie a,
body.chlMusic li#Music a,
body.chlSoftware li#miSoftware a{
background-color:#E8F3FF;
border:1px solid #05F;
}
</style>
</head>
<body class="chlSoftware">
<menu>
<li id="miMovie"><a href="/movie/" title="DVDRip">电影
</a></li>
<li id="miMusic"><a href="/music/" title="mp3">音乐
</a></li>
<li id="miSoftware"><a href="/dl/" title="共享">软件
</a></li>
</menu>
</body>
</html>
