CSS 下拉菜单级别

Question

我有一个 CSS 下拉菜单，我正在为不同级别的自定义而苦苦挣扎。例如，您在第一个下拉菜单中看到的是 1 级，然后从该下拉菜单中看到的下一个下拉菜单是 2 级。我想针对不同级别自定义内容。

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: ...
}