用HTML，如果简单的使用本文前面的CSS，不做任何修改的话，导航菜单的显示将如图6。由于li元素继承主菜单的样式，子列表将呈现出主导航栏一样的样式。
图6：采用默认样式表子菜单导航栏
为了让嵌套的列表呈现出它是一个子菜单而不是主导航栏一部分的效果，让我们增加一个样式规则：
#navigation ul ul {
margin-left: 12px;
}
这个规则将缩进嵌套列表，让它在主菜单的右边界对齐，象图7显示的这样：
图7：带有缩进规则的导航栏
最后让我们给嵌套表里面的li和a元素增加一些简单的样式以便完善效果：
#navigation ul ul li {
border-bottom: 1px solid #711515;
margin: 0;
}
#navigation ul ul a:link, #navigation ul ul a:visited {
background-color: #ED9F9F;
color: #711515;
}
#navigation ul ul a:hover {
background-color: #711515;
color: #FFFFFF;
}