}
.menuHolder .a5 li:nth-of-type(4) > a {background:#666;
transform:rotate(54deg);
}
.menuHolder .a5 li:nth-of-type(3) > a {background:#777;
transform:rotate(36deg);
}
.menuHolder .a5 li:nth-of-type(2) > a {background:#888;
transform:rotate(18deg);
}
/*绘制服务、商店、联系我们的子菜单*/
.menuHolder .a3 li:nth-of-type(3) > a {background:#777;
transform:rotate(60deg);
}
.menuHolder .a3 li:nth-of-type(2) > a {background:#888;
transform:rotate(30deg);
}
/*鼠标滑过第一层菜单展开第二层菜单*/
.menuHolder li.s1:hover ul.p2 {
transform:rotate(0deg);
}
/*鼠标滑过第二层菜单展开第三层菜单*/
.menuHolder li.s2:hover ul.p3 {
transform:rotate(0deg);
}
/*鼠标滑过改变背景颜色和文字颜色*/
.menuHolder ul li:hover > a {background:#f00; color:#fff;}
.menuHolder li.s2:hover > a {background:#d00; color:#fff;}
.menuHolder .a6 li:hover > a {background:#b00; color:#fff;}
.menuHolder .a5 li:hover > a {background:#b00; color:#fff;}
.menuHolder .a3 li:hover > a {background:#b00; color:#fff;}
</style>
</head>
<body>
<div class="menuHolder">
<div class="menuWindow">
<ul class="p1">
<li class="s1"><a href="#url">导航菜单</a>
<ul class="p2">
<li class="s2"><a href="#"><span>首页</span></a></li>
<li class="s2"><a href="#url"><span>服务</span></a>
<ul class="p3 a3">
<li><a href="#">打印</a></li>
<li><a href="#">编辑</a></li>
<li><a href="#">保管</a></li>
</ul>
</li>
<li class="s2"><a href="#url"><span>联系</span></a>
<ul class="p3 a6">
<li><a href="#">支持</a></li>
<li><a href="#">销售</a></li>
<li><a href="#">购买</a></li>
<li><a href="#">摄影师</a></li>
<li><a href="#">零售商</a></li>
<li><a href="#">常规</a></li>
</ul>
</li>
<li class="s2"><a href="#url"><span>商店</span></a>
<ul class="p3 a3">
<li><a href="#">南区</a></li>
<li><a href="#">北区</a></li>
<li><a href="#">中心区</a></li>
</ul>
</li>
<li class="s2"><a href="#url"><span>联系我们</span></a>
