CSS下拉菜单级别

Question

我有一个CSS下拉菜单，我很努力地为不同的级别定制它。例如，你首先看到的是第一层，下一层是第二层。我想定制不同层次的东西。

div#dropMenu li.submenu 
{ 
    background: url(../images/arrows/arrow11.png) no-repeat 99% 99%; 
} 

div#dropMenu li.submenu:hover 
{ 
    background: url(../images/arrows/arrow9.png) no-repeat 99% 99%; 
} 

如果您有子菜单项，上面的代码会放置箭头的图像。这工作正常，但是，我不希望它在顶部菜单上，我希望它只是第一次下降和前进。我怎样才能指定它？我试过'div＃dropMenu li.level1.submenu'，它不起作用。

这里我张贴的CSS片的其余部分：

div#dropMenu { 
    width:1000px; 
    margin:0px 0px; 
    text-align:center; 
    z-index:1000; 
    position:relative; 
} 
div#dropMenu ul { 
    border-left: 1px solid #333; 
    margin:0; 
    padding:0; 

} 


div#dropMenu li { 
    border-right: 1px solid #999; 
    position:relative; 
    list-style:none; 
    margin:0; 
    float:left; 
    line-height:1em; 
    width:19.90%; 
    /**width:16.55%;*/ 
} 
div#dropMenu ul.level1 { 
    width:100%; 
    margin:0 auto; 
    text-align:left; 
    background: url(../images/menu_bg.png) repeat-x; margin-top: 0px; color: #fff;/*background color of top menu when NOT selected. */ 
    z-index:1000; 
    float:left; 
} 


div#dropMenu ul.level2 li { 
    padding-top: 6px; 
    border-top: 1px solid #999999; 

} 
div#dropMenu li a { 
    display: block; 
    /* Hides from IE5-mac \*/ 
    height: 1%; 
    /* End hide from IE5-mac */ 
    padding: 15px 0px 10px 0px; 
    text-decoration: none; 
    color: #555; 
    font-size: 13px; 
    -webkit-font-smoothing: antialiased; 
    text-align:center; 
    font-weight: bold; 
    border-right: 0px solid ; 
} 
div#dropMenu li:hover {} 
div#dropMenu li.submenu:hover {} 
div#dropMenu li a.noLine { 
    border:none; 
} 

div#dropMenu>ul a { 
    width: auto; 
    z-index:1000; 
} 
div#dropMenu ul ul { 
    display: none; 
} 
div#dropMenu ul ul li { 
    width:16.5em; 
} 
div#dropMenu ul.level1 li.submenu:hover ul.level2, 
div#dropMenu ul.level2 li.submenu:hover ul.level3, 
div#dropMenu ul.level3 li.submenu:hover ul.level4, 
div#dropMenu ul.level4 li.submenu:hover ul.level5, 
div#dropMenu ul.level5 li.submenu:hover ul.level6, 
div#dropMenu ul.level6 li.submenu:hover ul.level7, 
div#dropMenu ul.level7 li.submenu:hover ul.level8 { 
    position: absolute; 
    width: 12em; 
    display:block; 
    z-index:1000; 
    width: 16.5em; 
} 

Answer 1

这应该这样做

#dropMenu li li { 
    background: ... 
}